垂直和水平對齊div內的文本

-2

如何水平和垂直對齊div內的文本？我能夠水平對齊文本對齊：中心。但是，垂直對齊不起作用。垂直和水平對齊div內的文本

<!DOCTYPE html> 
<meta charset="utf-8"> 
<title></title> 
<head> 
    <style> 
     .blocks { 
      width: 200px; 
      height: 100px; 
      border: 1px solid black; 
      text-align: center; 
      vertical-align: center; 
     } 
     #a1 { 
      margin: 0 auto; 
      margin-top: 40px; 
     } 
     #a2 { 
      float: left; 
      margin-left: 25%; 
     } 
     #a3 { 
      float: right; 
      margin-right: 25%; 
     } 
     #a4 { 
      margin: 10% auto 0; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
    <div class="blocks" id="a1">some text</div> 
    <div class="blocks" id="a2">some text</div> 
    <div class="blocks" id="a3">some text</div> 
    <div class="blocks" id="a4">some text</div> 
    </div> 
</body>

謝謝。

來源

2016-12-28 martinbshp

檢查這個[**問題**]（http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block）。這個問題已經被問了數百次了。在發佈問題之前請做一些調查。 –

您可以使用CSS Flexbox的。使您的.blocks柔性容器&應用柔性對齊屬性align-items & justify-content。像：

.blocks { 
    display: flex; /* Flex Container */ 
    align-items: center; /* Gives Vertical Alignment */ 
    justify-content: center; /* Gives Horizontal Alignment */ 
}

看一看片斷如下（使用全屏模式）：

.blocks { 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
#a1 { 
 
    margin: 0 auto; 
 
    margin-top: 40px; 
 
} 
 
#a2 { 
 
    float: left; 
 
    margin-left: 25%; 
 
} 
 
#a3 { 
 
    float: right; 
 
    margin-right: 25%; 
 
} 
 
#a4 { 
 
    margin: 10% auto 0; 
 
}

<body> 
 
    <div id="container"> 
 
    <div class="blocks" id="a1">some text</div> 
 
    <div class="blocks" id="a2">some text</div> 
 
    <div class="blocks" id="a3">some text</div> 
 
    <div class="blocks" id="a4">some text</div> 
 
    </div> 
 
</body>

希望這有助於！

來源

2016-12-28 06:54:23

謝謝索拉夫。我會做筆記並在flexbox上進行閱讀。 – martinbshp

使用CSS3 Flexbox的概念

集父顯示：彎曲
一組孩子保證金：汽車

它工作得很好，我添加下面的代碼片段。

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<title></title> 
 
<head> 
 
    <style> 
 
     .blocks { 
 
      width: 200px; 
 
      height: 100px; 
 
      border: 1px solid black; 
 
      text-align: center; 
 
      vertical-align: center; 
 
      display:flex; 
 
     } 
 
     #a1 { 
 
      margin: 0 auto; 
 
      margin-top: 40px; 
 
     } 
 
     #a2 { 
 
      float: left; 
 
      margin-left: 25%; 
 
     } 
 
     #a3 { 
 
      float: right; 
 
      margin-right: 25%; 
 
     } 
 
     #a4 { 
 
      margin: 10% auto 0; 
 
     } 
 
     span{ 
 
     margin:auto;} 
 
    </style> 
 
</head> 
 
<body> 
 
    <div id="container"> 
 
    <div class="blocks" id="a1"><span>some text</span></div> 
 
    <div class="blocks" id="a2"><span>some text</span></div> 
 
    <div class="blocks" id="a3"><span>some text</span></div> 
 
    <div class="blocks" id="a4"><span>some text</span></div> 
 
    </div> 
 
</body>

來源

2016-12-28 06:53:55

垂直和水平對齊div內的文本

回答

相關問題