在父行中垂直居中圖像

我正在嘗試在父流體容器內垂直居中圖像。在父行中垂直居中圖像

Here is a fiddle that outlines the problem.

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-2 col-sm-4 col-xs-4 col-xxs-4"> 
     <div class=""> 
      <a href="#"><img id="logo" class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q" style="vertical-align: middle;" alt="logo here"/></a> 
     </div> 
     </div> 
     <div class="col-md-10 col-sm-8 col-xs-8 col-xxs-8"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div class=""> 
       <nav class="navbar navbar-default" role="navigation"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </button> 
       </div> 
       <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
        <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#" style="color: #1B75BB;">Search</a> 
        </li> 
        <li><a href="#" style="color: #1B75BB;">Archives</a> 
        </li> 
        <li><a href="#" style="color: #1B75BB;">About</a> 
        </li> 
        </ul> 
       </div> 
       </nav> 
      </div> 
      </div> 
     </div> 
      </div> 
     </div> 
     </div>

正如你所看到的圖像在水平方向居中，而不是垂直方向。做一些事情，比如設置保證金，甚至是父容器，似乎都不起作用。這感覺應該是相當簡單的解決，但我正在努力。

來源

2015-07-21 Archetype90

的代碼的jsfiddle似乎不忍心在這個問題的代碼沒有任何關係。你有沒有弄錯小提琴的網址？ – Simba

垂直居中元素總是有點痛苦，但是你做過谷歌搜索嗎？根據我的經驗，使用「推杆元素」可以創造奇蹟！ – BillyNate

https://jsfiddle.net/DTcHh/10247/ - 抱歉關於小提琴，這是更新！謝謝BillyNate，我曾經搜查過，但從來沒有見過推杆元素。我現在會研究它。 – Archetype90

在其他元素中垂直居中元素有兩種方法，它們都取決於父容器的樣式。一是設置行高度一樣的容器高度，而另一種是使用表格單元格：

img { 
 
    height: 25px; 
 
    width: 25px: 
 
} 
 
.container { 
 
    height: 50px; 
 
    width: 50px; 
 
    text-align: center; 
 
    border:1px solid; 
 
} 
 
.one { 
 
    line-height: 50px; /* Same as container height */ 
 
} 
 
.container.two { 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
}

<div class="container one"> 
 
    <a href="#"> 
 
    <img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q" style="vertical-align: middle;" alt="logo here" /> 
 
    </a> 
 
</div> 
 
<br /> 
 
<div class="container two"> 
 
    <a href="#"> 
 
    <img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q" style="vertical-align: middle;" alt="logo here" /> 
 
    </a> 
 
</div>

來源

2015-07-21 15:28:43

這個是什麼？只給外層div一個imagecontainer的類，使用display: inline-block;的幫助類，並將該屬性賦予它旁邊的img，因此它會在該跨度旁邊垂直居中。

HTML：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-2 col-sm-4 col-xs-4 col-xxs-4"> 
     <div class="imagecontainer"> 
      <span class="helper"></span> 
      <a href="#"><img id="logo" class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q" alt="logo here"/></a> 
     </div> 
     </div> 
     <div class="col-md-10 col-sm-8 col-xs-8 col-xxs-8"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div class=""> 
       <nav class="navbar navbar-default" role="navigation"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </button> 
       </div> 
       <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
        <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#" style="color: #1B75BB;">Search</a> 
        </li> 
        <li><a href="#" style="color: #1B75BB;">Archives</a> 
        </li> 
        <li><a href="#" style="color: #1B75BB;">About</a> 
        </li> 
        </ul> 
       </div> 
       </nav> 
      </div> 
      </div> 
     </div> 
      </div> 
     </div> 
     </div>

CSS：

.imagecontainer { 
    height: 25px; 
    white-space: nowrap; 
    text-align: center; 
    margin: 1em 0; 
} 
.img-responsive { 
    vertical-align: middle; 
    height: 25px; 
    display: inline-block 
} 
.helper { 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
}

https://jsfiddle.net/DTcHh/10286/

答案已被適當地改編自 How to vertically align an image inside div

來源

2015-07-21 15:36:06 cari

這很棒，幾乎正是我所期待的。我看到的唯一問題是它是固定的高度。由於圖像響應迅速，高度不斷變化。是否有可能適應變化的高度？（我現在正試圖完成這個工作）。我在小提琴中給出的圖像就是一個例子。 – Archetype90

那麼，只有當你的排保持相同的高度時，它才容易。從imagecontainer刪除填充並將高度設置爲您的菜單高度52px。看這裏：https://jsfiddle.net/DTcHh/10286/ – cari

通過使我在一個不同的方式來完成這次「一個'有背景圖像和匹配高度https://jsfiddle.net/tonytansley/gu8b6yxk/1/

#logo { 
    margin: 0 auto; 
    background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnfIk3IX1dY-okcqPH5BX_L0XF2z31qwP-MD0nijTdAGc2alNc4Q'); 
    display: inline-block; 
    width: 100%; 
    height: 52px; 
    max-height: 100%; 
    background-size: 45px; 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
}

，然後取出來的圖像中的一個標籤

<a href="#" id="logo"></a>

來源

2015-07-22 11:26:54

在父行中垂直居中圖像

回答

相關問題