使用css在中間放置DIV類

對佈局問題有一些CSS相關的問題。首先看到這個截圖：在這裏，我已經使用CSS這樣的：使用css在中間放置DIV類

.image{float:right; padding-top:10px; padding-left:10px; padding-bottom:10px;} 
.description{font-size:15px; font-style:italic; padding:10px; color:#5C5C5C; text-shadow:0px 0px 1px #A1A1A1;} 
.image, .description{display:block;} 
.main-article{clear:both;}

，但我想要做的就是在中間顯示的說明。像這樣：你能告訴我CSS，將描述類div定位在第二張圖像的中間。由於

來源

2013-06-20 Blu Man

您能不能告訴我們的HTML？ –

你有更多的html/css可以看嗎？但看起來你需要添加一個margin-top：value來減少描述類。 –

+1的圖像。 – kleinfreund

Basicly這將是：

.description, .image { 
    display:inline-block; 
    vertical-align:middle; 
}

來源

2013-06-20 18:47:22

的css添加似乎是一個不錯的主意，但它打破了佈局，請參閱此處：http://i.stack.imgur.com/MdCFN.png –

iF您在開始時生成了一個codepen或jsfiddle它可以從您的代碼進行演示並解釋。這是基礎，它可能需要調整並適應您的html結構。 :) –

您可以設置圍繞這兩個項目的容器的高度，然後說明設置爲

top: 50%

下面是它的一個小提琴

http://jsfiddle.net/andrewliu/mS4pB/1/

UPDATE：

我已經修改了一下，你可以做一些黑客，你需要做的有容器和使用margin-top: 50%;，然後有margin-top: -25%;

http://jsfiddle.net/mS4pB/9/

來源

2013-06-20 19:05:31 hellomello

在'top：50％'之後，你在jsfiddle中缺少一個分號，請參閱：http://jsfiddle.net/mS4pB/6/ – user2019515

@ user2019515我已經用另一種方法更新了我的答案 – hellomello

你的第二種方法doesn甚至沒有中心的div。 – user2019515

警告另一個容器！這個盒子模型正在修改中。

我會使用Flexible Box Model或Flexbox。

只是你必須把後續類的父元素：

對Flexbox的和柔性肝癌

其中：

對Flexbox的意味着父 - 柔性盒
柔性肝癌意味着Flexbox的水平中心中心

而且款式裏面，你必須把這些CSS規則：

.p-flexbox { 
    display: -webkit-box; 
    display: -moz-box; 
    display: box; 
}

而其中另一個CSS規則

.flex-hcc { 

    -webkit-box-orient: horizontal; 
     -moz-box-orient: horizontal; 
      box-orient: horizontal; 

    -webkit-box-pack: center; 
     -moz-box-pack: center; 
      box-pack: center; 

    -webkit-box-align: center; 
     -moz-box-align: center; 
      box-align: center;

}

這是一個例子：http://jsfiddle.net/GnbZD/1/個

乾杯，萊昂納多

來源

2013-06-20 19:56:17 leoMestizo

添加一個包裝周圍的描述和圖像，並使用display: table

#container { 
    display: table; 
} 
#container .image, #container .description { 
    display: table-cell; 
    vertical-align: middle; 
}

來源

2013-06-20 20:32:10 ponysmith

像GCyrillus說：

display: inline-block; 
vertical-align: middle;

會工作。但是，您並未定義寬度。所以你會做什麼是：

.image{ width: 300px; padding-top:10px; padding-left:10px; padding-bottom:10px; } 
.description{ width: 600px; font-size: 15px; font-style: italic; padding: 10px; color: #5C5C5C; text-shadow: 0px 0px 1px #A1A1A1; } 
.image, .description{ display: inline-block; vertical-align: middle; }

一旦你改變這些寬度爲任何你需要的，它會爲你工作得很好。良好的措施，確保你不犧牲品inline-block的空白bug，因此無論是應用：

.image { margin-left: -4px; } //It works sometimes for me but I think it isn't cross-browser very well.

或不要讓你的元素之間的任何空白的HTML像這樣：

<div class="description"> 
    Lorem Ipsum 
</div><div class="image"> 
    <img /> 
</div>

另外，如果你想支持IE7：

.image, .description { display: inline-block; vertical-align: middle; *display: inline; zoom: 1; } //Some people don't like the hacks and some people don't like supporting old IE ;-)

來源

2013-06-21 16:44:41

使用css在中間放置DIV類

回答

相關問題