中心一個元素，一個向右

但目前看來是這樣的：

如何我是否可以解決此問題，我希望Member since June 2015文字居中，圖標位於右側。

我嘲笑了下面顯示這個jsfiddle。

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%; 
}

小提琴：https://jsfiddle.net/8ybz6z13/

來源

2016-05-18 methuselah

嘗試將'.profile-join-date'的'display'從'inline'改爲'inline-block'（https://jsfiddle.net/3bq3gt39/） – pzmarzly

如果這就是你的意思，告訴我和我將把它作爲答案 – pzmarzly

我想將自2015年6月以來的'會員'文本居中並將「設置圖標」定位在右側。你的解決方案不會這樣做：（ – methuselah

我做的小提琴一些變化 - 我的叉子可以在https://jsfiddle.net/z7vhq158/

發現

我使它完全中心文本。

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-join-date的display到inline-block，並設置其width到100%
做從按鈕設置.ddd的position到absolute與right: 0; top: 0和.ee的（容器的）僞覆蓋position到relative

全碼：

.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; 
}

請注意它不會顯示在小屏幕上正確顯示。國際海事組織最好犧牲準確的文本居中，並使其網格狀（請參閱評論和其他答案或使文本元素的按鈕子或類似的東西）

來源

2016-05-18 21:18:10 pzmarzly

您可以在父div上使用display: table。關於孩子使用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>

請對瀏覽器的支持和已知問題檢查caniuse.com。有關CSS表格模型的更多詳細信息，請檢查spec。我已更新jsfiddle。我也收拾你的例子。請記住永遠以minimal, complete and verifiable爲例。

來源

2016-05-18 21:21:40

中心一個元素，一個向右

回答

相關問題