將絕對位置與居中文本結合

我在定位div中的3個單獨文本元素時遇到了問題。將絕對位置與居中文本結合

這是我想達到

任務，簡化了什麼：

中間的數量必須居中，不管它有多寬。（自動居中）
數量低於一定要在左邊
信下面必須在正確的

我的想法：

創建在數量養育容器中心
放置一個塊元素以包含該號碼，該號碼也自動按照要求居中
做其他元素的絕對定位在.ioitem。

我用下面的代碼

<div class="ioitem ioitem1"> 
    <div class="numberContainer"> 
     <div class="number">1</div> 
     <div class="width">3</div> 
     <div class="base">D</div> 
    </div> 
</div>

樣式

.ioitem { 
    display: inline-block; 
    background-color: white; 
    height: 30px; 

    margin: 0px 10px 10px 0px; 
    padding: 0px 0px 0px 0px; 

    position: relative; 
} 
.ioitem1 { width: 30px; } 
.ioitem > .numberContainer { 
    font-size: 12px; 
    font-weight: bold; 

    position: absolute; 
    top: 0; 
    left: 0; 
} 
.ioitem > .number { 
    display: block; 
    margin: auto; 
    text-align: center; 
}

我這是什麼亂七八糟的：

的數量是在中心心不是集中和幾乎任何東西沒有按照我的意願放置。爲了簡潔，我省略了一些CSS。

請問，我怎麼能得到想要的結果？一個步驟列表就足夠了。

讓我頭痛的事情是讓.number的文本自動居中。

來源

2016-07-01 user35443

嘗試此CSS表格佈局，因爲表格單元格具有vertical-align功能。請注意，我稍微重新排列了HTML標籤，將數字放在中間。

body { 
 
    background: silver; 
 
} 
 
.numberContainer { 
 
    background: white; 
 
    display: table; 
 
    table-layout: fixed; 
 
    height: 90px; 
 
    width: 90px; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
} 
 
.width, .number, .base { 
 
    display: table-cell; 
 
    text-align: center; 
 
} 
 
.width, .base { 
 
    vertical-align: bottom; 
 
} 
 
.number { 
 
    vertical-align: middle; 
 
    font-size: 60px; 
 
    color: orange; 
 
}

<div class="ioitem ioitem1"> 
 
    <div class="numberContainer"> 
 
    <div class="width">3</div> 
 
    <div class="number">1</div> 
 
    <div class="base">D</div> 
 
    </div> 
 
</div>

jsFiddle

來源

2016-07-01 17:11:46 Stickers

我不會假裝我明白這是如何工作的，但它似乎是最優雅的解決方案。如果你用兩句話來描述你做了什麼，你會怎麼說？現在每個孩子div可以被認爲是一個具有不同垂直對齊的表格單元嗎？ – user35443

我在本演示中添加了一些描述 - https://jsfiddle.net/4tha983c/1/應該解釋它。 – Stickers

你可以試試這個代碼。 http://codepen.io/nehemc/pen/LkyJYN

<style> 
.ioitem { display: inline-block; background: #C03; height: 200px; margin: 0px 10px 10px 0px; padding: 0px 0px 0px 0px; position: relative; width:200px; color:#fff; } 
.number { position:absolute; left:0; right:0; top:0; bottom:0; height:10px; margin:auto; text-align:center; } 
.width { position:absolute; left:20px; bottom:20px; height:10px; margin:auto; text-align:center; background:#fff; padding:10px; color:#000; } 
.base { position:absolute; right:20px; bottom:20px; height:10px; margin:auto; text-align:center; background:#fff; padding:10px; color:#000; } 
</style> 

<div class="ioitem ioitem1"> 
    <div class="number">1</div> 
    <div class="width">1</div> 
    <div class="base">1</div> 
</div>

來源

2016-07-01 16:57:29 Nehemiah

有跡象表明將在這裏工作了幾個方法 - 第一個不要求你改變你的HTML，並設置要數在頂部的位置是：絕對的，然後將其轉換到您想要的位置。

<style> 
    .numberContainer { 
     position: relative; 
     display: inline-block; 
    } 
    .numberContainer div{ 
     width: 30px; 
     display: inline-block; 
    } 
    .numberContainer .number{ 
     position: absolute; 
     left: 50%; 
     transform: translate(calc(-50% - 0.1em), -50%); 
    } 
    </style> 
    <div class="ioitem ioitem1"> 
     <div class="numberContainer"> 
      <div class="number">1</div> 
      <div class="width">3</div> 
      <div class="base">D</div> 
     </div> 
    </div>

或者，如果你不想使用的位置是：在你的內容是絕對的，你可以翻轉HTML的順序您的圖表匹配和這樣做的。

<style> 
    .numberContainer { 
     position: relative; 
     display: inline-block; 
    } 
    .numberContainer div{ 
     width: 30px; 
     display: inline-block; 
    } 
    .numberContainer .number{ 
     transform: translate(calc(-50% - 0.1em), -50%); 
    } 
    </style> 
    <div class="ioitem ioitem1"> 
     <div class="numberContainer"> 
      <div class="width">3</div> 
      <div class="number">1</div> 
      <div class="base">D</div> 
     </div> 
    </div>

希望其中的一個能夠滿足您的需求！

來源

2016-07-01 16:58:45 will

將絕對位置與居中文本結合

回答

相關問題