-Center ein Element und eine rechts

Question

Ich versuche, meine div Elemente reihen sich wie folgt zu erhalten:

Aber momentan scheint es wie folgt aus:

Wie Würde ich dieses Problem lösen, hätte ich gerne den Text Member since June 2015 zentriert und das Symbol rechts positioniert.

Ich habe eine jsfiddle verspottet, die das zeigt.

HTML

<div class="profile-header"> 
    <div class="profile-rating"> 
    <i class="icon ion-star energized" ng-repeat="i in [1, 2, 3, 4]"></i><i class="icon ion-star dark" ng-repeat="i in [1]"></i> 
    </div> 
    <div class="ee"> 
    <div class="profile-join-date">Member since June 2015</div> 
    <div class="ddd">&Theta;</div> 
    </div> 
</div> 

CSS

.profile-header { 
    padding-top: 2em; 
    padding-bottom: 1.75em; 
    background-color: #fff; 
} 

.profile-name { 
    padding-top: 0.75em; 
    padding-bottom: 0.75em; 
    font-size: 1.75em; 
    text-align: center; 
    font-weight: bold; 
} 

.profile-rating { 
    text-align: center; 
    font-size: 1.5em; 
    padding-bottom: 0.75em; 
} 

.profile-join-date { 
    text-align: center; 
    display: inline; 
    width: 50%; 
    margin: 0 auto; 
} 

.ddd { 
    float: right; 
    display: inline; 
    font-size: 2em; 
    padding-right: 0.5em; 
} 

.profile-join-date { 
    width: 50%; 
    margin: 0 auto; 
} 

.ee { 
    width: 100%; 
} 

Fiddle: https://jsfiddle.net/8ybz6z13/

Answer 1

ich einige Änderungen an der Geige gemacht haben - meine Gabel kann bei https://jsfiddle.net/z7vhq158/

finden

Ich habe es den Text genau zentriert.

HTML (keine Änderungen):

<div class="profile-header"> 
    <div class="profile-rating"> 
    <i class="icon ion-star energized" ng-repeat="i in [1, 2, 3, 4]"></i><i class="icon ion-star dark" ng-repeat="i in [1]"></i> 
    </div> 
    <div class="ee"> 
    <div class="profile-join-date">Member since June 2015</div> 
    <div class="ddd">&Theta;</div> 
    </div> 
</div> 

CSS:

Änderungen:

• geändert .profile-join-date ‚s display-inline-block und legen Sie seine width-100%
• gemacht pseudo-Overlay von der Taste durch .ddd 's position zu absolute mit right: 0; top: 0 und .ee' s-Einstellung (Container) position zu relative

Voll Code:

.profile-header { 
    padding-top: 2em; 
    padding-bottom: 1.75em; 
    background-color: #fff; 
} 

.profile-name { 
    padding-top: 0.75em; 
    padding-bottom: 0.75em; 
    font-size: 1.75em; 
    text-align: center; 
    font-weight: bold; 
} 

.profile-rating { 
    text-align: center; 
    font-size: 1.5em; 
    padding-bottom: 0.75em; 
} 

.profile-join-date { 
    text-align: center; 
    display: inline-block; 
    width: 100%; 
    margin: 0 auto; 
} 

.ddd { 
    float: right; 
    display: inline-block; 
    font-size: 2em; 
    padding-right: 0.5em; 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

.ee { 
    width: 100%; 
    position: relative; 
} 

Bitte beachten Sie, es wird nicht angezeigt richtig auf kleineren Bildschirmen. IMO ist es besser, die exakte Textzentrierung zu opfern und es gitterartig zu machen (siehe Kommentare und andere Antworten oder die Schaltfläche Kind des Textelements oder etwas Ähnliches)

Answer 2

Sie können display: table auf dem Elternteil verwenden. Auf dem Kindgebrauch display: table-cell.

.member-info { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.cell-center { 
 
    display: table-cell; 
 
    width: 100%; 
 
    margin: 0 auto; /* this centers the text */ 
 
    text-align: center; /* this centers the wrapped text */ 
 
} 
 

 
.cell-right { 
 
    display: table-cell; 
 
    text-align: right; 
 
    width: 10%; 
 
}

<div id="member-info"> 
 
    <div class="cell-center">Member since June 2015</div> 
 
    <div class="cell-right">&Theta;</div> 
 
</div>

Bitte überprüfen caniuse.com für Browser-Unterstützung und bekannte Probleme. Weitere Informationen zum CSS-Tabellenmodell finden Sie unter spec.

Ich habe die jsfiddle aktualisiert. Auch ich habe dein Beispiel aufgeräumt. Bitte denken Sie daran, immer ein minimal, complete and verifiable Beispiel zu machen.