0

如何使 div 中的文本：“grid2”和“section2”在中间垂直对齐？

这是我的 HTML 中的问题还是我的问题出现在 css 中？谁能指出我正确的方向？

我曾尝试查看其他问题，但答案并没有让我更进一步。

我的 HTML：

<html>
<head>
    <title></title>
</head>
<body>
<div id="background">
 <div id="template">  
  <div class="grid2">
   <div class="section2">
    <h2 style="text-align: center;">New 2014 Model</h2>
    <p>Latest model forced air (with a fan) fully automatic 48 egg incubator.</p>
    <p>This new design uses a sophisticated program for automated hatching process that    produces one of the highest hatching rates of any model, yet is incredibly easy to use.  Perfect for small hatchers, self sufficient households, or families incubating in the backyard.</p>
   </div>
  </div>
</div>

<!--responsive-->

我的 CSS：

body {
margin:0px;
padding:0px;
} 
.clear {
clear:both;
} 
#background {
background-color:#FFFFFF; 
background-position:top;
width:100%;
max-width:1000px;
margin:auto;
} 
#template {
padding:10px;
font-family:Arial, Helvetica, sans-serif;
color:#000;
font-size:16px;
} 
.responsive {
width:100%;
} 
.grid2 {
float: left;
width:50%;
min-width:280px;
}
.grid3 {
float: left;
width:33.3%;
min-width:280px;
} 
.grid4 {
float: left;
width:16.66%;
min-width:160px;
} 
.section4 {
padding:1px;
} 
.section3 {
padding:5px;
} 
.section2 {
padding:10px;
}
.shrinkable {
clear: both;
padding: 0px;
margin: 0px; 
text-align:center;
} 
.shrinkable img {
width:60%;
height: auto;
} 
.shrinkable p {
text-align:center;
} 
.column {
display:block;
float:left;
margin: 1% 0 1% 1.6%;
} 
.column:first-child {
margin-left: 0;
} 
.box {
width: 32.2%;
} 
.row:before,.row:after {
content:"";
display:table;
} 
.row:after {
clear:both;
}

这是 工作示例

4

4 回答 4

1

这将使文本垂直和水平居中

.grid2 {height: 100%; display:table; text-align: center}
.section2 {display: table-cell; vertical-align: middle}
于 2013-10-24T08:41:02.270 回答
0

试试这个，看看。

.grid2  {float:left; height:50%; margin-bottom:-120px;}
.section2   {clear:both; height:240px; position:relative;}
于 2013-10-24T08:33:47.813 回答
0

添加一个 CSS 类

p {
   text-align: center;
}

或像在标题中那样添加内联样式：

<p style="text-align: center;>Latest model forced air (with a fan) fully automatic 48 egg incubator.</p>
<p style="text-align: center;>This new design uses a sophisticated program for automated hatching process that produces one of the highest hatching rates of any model, yet is incredibly easy to use. Perfect for small hatchers, self sufficient households, or families incubating in the backyard.</p>
于 2013-10-24T08:33:14.347 回答
-1

随着它的响应，我发现最好的方法不是依赖 css，因为如果它真正响应，就不应该有任何设定的高度。

最好的方法是使用jquery查找父div的高度，然后根据该值对齐所需的text/image/div。这可以使用 jquery resize 函数来计算，这意味着当尺寸改变时它保持居中。

类似于以下内容：

$( window ).resize(function() {
   var changeheight = $('.parentdiv').height() / 2;
   $('.div').css('margin-top', changeheight)
});

但是您需要在计算中考虑您要居中的 div 的大小。

于 2013-10-24T09:32:15.123 回答