Platz Untertitel neben zentrierten Überschrift Titel

https://imgur.com/Wv3nWms Platz Untertitel neben zentrierten Überschrift Titel

Ich versuche, die Typografie oben zu erreichen. Der Titel ist zentriert, aber der Untertitel befindet sich direkt neben dem Titel. Mit der kleinen Klasse von Boostrap konnte ich nur etwas Ähnliches erreichen.

https://imgur.com/5BXCFNj

Das Problem ist, wird der Untertitel Raum macht in der Mitte aufgenommen werden. Ist das möglich? Ich weiß, dass ich den Subtext absolut positionieren und richtig positionieren kann, aber ich habe eine Menge Seiten, die mein Kunde so haben möchte.

Irgendwelche Ideen?

Hier ist der Code ‚ve durch die Art und Weise verwendet:

.small{ 
 
\t text-transform: lowercase !important; 
 
\t font-style: italic !important; 
 
\t font-family: times, serif !important; 
 
} 
 
.blue{ 
 
\t color: #35C4F0 !important; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<h1 class="text-center text-uppercase"><span class="small blue">software </span>game <br/>development</h1>

Quelle

2017-10-30 NickBags

hallo Bruder sein kann dieser Ihnen helfen, danke wird

<div class="head-box"> 

<h1 class="text-center text-uppercase"><span class="small blue">software </span>game <br/>development</h1> 
</div>

und hier ist css

.head-box{float: left; width: 100%; position: relative;} 
.small{ 
text-transform: lowercase !important; 
font-style: italic !important; 
font-family: times, serif !important; 
} 
.blue{ 
color: #35C4F0 !important; 
position: absolute; 
left:25%; 
top:30px; 
transform: translate(-25%, 0); 
}

und hier ist fiddle

Quelle

2017-10-30 06:33:38

funktioniert ziemlich gut auf dem Handy.Aber nicht genau was ich bin Suche nach anderen Bildschirmgrößen – NickBags

auf welcher Bildschirmgröße Sie testen Bruder –

Überprüfen Sie diese [Geige] (http://jsfiddle.net/uopx4hh2/1/) jetzt –

Bitte versuchen dies. Ich habe unten css und div hinzugefügt, um h1 Tag zu wickeln.

.title h1 { 
    display: inline-block; 
    text-align: left; 
}

.small{ 
 
    text-transform: lowercase !important; 
 
    font-style: italic !important; 
 
    font-family: times, serif !important; 
 
} 
 
.blue{ 
 
    color: #35C4F0 !important; 
 
} 
 
.title h1 { 
 
    display: inline-block; 
 
    text-align: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="text-center title"> 
 
    <h1 class="text-uppercase"><span class="small blue">software </span>game <br/>development</h1> 
 
</div>

Quelle

2017-10-30 06:29:10

es funktioniert nur wegen der Länge des Subtextes seit dem. Aber es funktioniert wirklich nicht bei anderen, wo Untertitel und Titel etwas länger sind. :( – NickBags

Kannst du irgendeinen Screenshot zur Verfügung stellen?? –

https://imgur.com/IKaw8e5 hier gehts – NickBags

.blue{ 
    color: #35C4F0; 
    text-transform: lowercase; 
    font-style: italic; 
    letter-spacing: 3.5px; 
} 

h1{ 
    text-transform: uppercase; 
    text-align: center; 
} 

<h1 class=""><span class="small blue">software </span>game<br/>development</h1>

Quelle

2017-10-30 07:03:02

Platz Untertitel neben zentrierten Überschrift Titel

Antwort

Verwandte Themen