在div內垂直對齊元素

Question

我試圖在div內垂直對齊元素，但我被圈子困住了。 紅色div是100％ width ，帶有我的代碼，但垂直線沒有顯示，圓圈（ div或帶有background image s的span ）不在中間。

我的代碼：

 .welcomeArea{ margin-top: 70px; max-height: 98px; height: 98px; background-color: #293847; } .welcomeAreaContent{ line-height: 98px; color: white; margin-left: 5%; margin-right: 5%; } .welcomeAreaContent > span { display:inline-block; } .welcomeAreaContent .welcomeName{ font-weight: bold; font-size: 1.7em; } .verticalLine { border-left: thick solid #ff0000; content: ""; } .circle { width: 50px; height: 50px; border-radius: 50%; behavior: url(PIE.htc); -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; margin-left: 32px; display: inline-block; } .twittericon{ background: url('data:image/png;base64,...') no-repeat center; background-color: white; background-size: cover; } 

 <div class="welcomeArea"> <div class="welcomeAreaContent"> <div class="welcomeName"> TEXT TEXT <span class ="circle twittericon"></span> </div> <div class="verticalLine"> </div> </div> </div> 

結果如下所示：

Answer 1

使用display:flex

.welcomeAreaContent .welcomeName{
  font-weight: bold;
  font-size: 1.7em;
  display: flex;
  align-items: center;
}

 .welcomeArea{ margin-top: 70px; max-height: 98px; height: 98px; background-color: #293847; } .welcomeAreaContent{ line-height: 98px; color: white; margin-left: 5%; margin-right: 5%; } .welcomeAreaContent > span { display:inline-block; } .welcomeAreaContent .welcomeName{ font-weight: bold; font-size: 1.7em; display: flex; align-items: center; } .verticalLine { border-left: thick solid #ff0000; content: ""; } .circle { width: 50px; height: 50px; border-radius: 50%; behavior: url(PIE.htc); -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; margin-left: 32px; display: inline-block; } .twittericon{ background: url('data:image/png;base64,...') no-repeat center; background-color: white; background-size: cover; } 

 <div class="welcomeArea"> <div class="welcomeAreaContent"> <div class="welcomeName"> TEXT TEXT <span class ="circle twittericon"></span> </div> <div class="verticalLine"> </div> </div> </div> 

這是工作小提琴

Answer 2

更新下面的css部分使用flex來獲得內聯和垂直居中

.welcomeAreaContent .welcomeName {
  font-weight: bold;
  font-size: 1.7em;
  display: flex; /*Add this*/      
  align-items: center; /*Add this*/
}

 .welcomeArea { margin-top: 70px; max-height: 98px; height: 98px; background-color: #293847; } .welcomeAreaContent { line-height: 98px; color: white; margin-left: 5%; margin-right: 5%; } .welcomeAreaContent>span { display: inline-block; } .welcomeAreaContent .welcomeName { font-weight: bold; font-size: 1.7em; display: flex; align-items: center; } .verticalLine { border-left: thick solid #ff0000; content: ""; } .circle { width: 50px; height: 50px; border-radius: 50%; behavior: url(PIE.htc); -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; margin-left: 32px; display: inline-block; } .twittericon { background: url('data:image/png;base64,...') no-repeat center; background-color: white; background-size: cover; } 

 <div class="welcomeArea"> <div class="welcomeAreaContent"> <div class="welcomeName"> TEXT TEXT <span class="circle twittericon"></span> </div> <div class="verticalLine"> </div> </div> </div> 

Answer 3

有幾種方法可以做到這一點

1. 使用margin-top到當前div

2. 使用padding-top到父div

3. 使用位置：相對; 頂部：__ PX; 到目前的div

4. 請參閱https://www.w3schools.com/css/css_align.asp

希望能幫助到你

Answer 4

嘗試：

.circle
{ 
    vertical-align: middle;
}

Answer 5

您可以使用vertical-align屬性垂直對齊內聯元素。

.twittericon {
background: url(data:image/png;base64,...) no-repeat center;
background-color: white;
background-size: cover;
vertical-align: middle;
}

否則，如果它們是塊元素，則可以使用flexbox。

<ul class="parent">
<li>2</li>
<li>1</li>
</ul>
<style>
.parent { display: flex; align-items: center; }
</style>