Question

我有一个网站，我发表文章，我的问题是我有一个div在另一个div不垂直和水平居中，现在它位于父div的顶部...我需要垂直和水平div中心“作者” ...

以下是受此问题影响的一段HTML代码......

<div class="postcell">
  <div class="postshort75">21 Dicembre 2011 09:08:48 &#183; [Nel mondo, &egrave; Natale!]</div><div class="postshort25">Postato da</div>
  <div class="cleardiv"></div>
  <div class="postsxboxed"><div class="alignment">
  <a href="http://www.alecos.it/files/Natale2011.jpg" class="highslide" onclick="return hs.expand(this)"><img class="model" src="http://www.alecos.it/php/thumb.php?src=http://www.alecos.it/files/Natale2011.jpg&amp;x=420&amp;y=262&amp;f=0" align="left" style="margin: 5px 5px 5px 5px" alt="Immagine" title="Clicca Per Ingrandire"></a><span style="font-style: italic">In un mondo ogni giorno pi&ugrave; oscuro, pi&ugrave; frenetico, ingiusto e immorale, la speranza di un lieto futuro &eacute; la &quot;Luce&quot; che nasce a Natale. Solo &quot;Lui&quot; pu&ograve; incarnare l&#39;amore e irradiarlo in un mondo in declino, chi l&#39;accoglie trasforma il suo cuore e intraprende un pi&ugrave; giusto cammino. Un cammino che inizia dal nulla, da una semplice gelida grotta, da un &quot;Bambino&quot; in un&#39;umile culla, da una &quot;Santa&quot; magnifica notte. Ma prosegue per tutta la terra dove regna miseria ed orrore, dove soffiano venti di guerra, dove l&#39;odio sovrasta l&#39;amore, dove il debole invoca giustizia, l&#39;affamato non ha da mangiare, i bambini tra topi e sporcizia, tanti uomini a soffrire e pregare. Proprio qui s&#39;interrompe il cammino per infondere nuove speranze, per mutare a fratelli il destino accorciando inumane distanze. Che sia questo per tutti un dovere, il trionfo del bene sul male, Dio &eacute; &quot;Amore&quot; ma senza frontiere, dice il &quot;Bimbo&quot; che nasce a Natale.</span>
</div></div><div class="postdxboxed"><div class="author"><a href="mailto:alecos@alecos.it?subject=Diario:%20Nel%20mondo,%20&egrave;%20Natale!&amp;body=Gentile%20visitatore,%20La%20informo%20che%20messaggi%20offensivi%20o%20volgari%20verranno%20scartati,%20buona%20prosecuzione." class="hyperlink">Alessandro Marinuzzi</a><br><br><div class="srtgs" id="rt_50492"></div></div></div>
</div>

从这个截图中可以看出，Div作者位于顶部，我需要移动到父div的中间......

example

这是我的css ......

/* Style Main Box Content */
.postcell {
  background-image: url("../bkg/Bkg_96.png");
  border: #6666FF 1px solid;
  box-shadow: 0 0 15px #888;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  display: table;
}
/* Style Box Title Left (Topic) */
.postshort75 {
  font-family: Arial, Helvetica, FreeSans, 'Nimbus Sans L', sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: normal;
  font-weight: bold;
  font-variant: normal;
  color: #E6E6FA;
  background-image: url("../bkg/Bkg_115.jpg"); /* Barra Blue */
  background-color: #6666FF;
  border-bottom: #6666FF 1px solid;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 0 auto;
  vertical-align: middle;
  width: 75%;
  float: left;
  display: table-cell;
}
/* Style Box Title Right (Posted By) */
.postshort25 {
  font-family: Arial, Helvetica, FreeSans, 'Nimbus Sans L', sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: normal;
  font-weight: bold;
  font-variant: normal;
  color: #E6E6FA;
  background-image: url("../bkg/Bkg_115.jpg"); /* Barra Blue */
  background-color: #6666FF;
  border-bottom: #6666FF 1px solid;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 0 auto;
  vertical-align: middle;
  width: 25%;
  float: right;
  display: table-cell;
}
/* Style Box Post Left (Content of Article) */
.postsxboxed {
  border-right: #6666FF 1px solid;
  width: 75%;
  float: left;
  padding: 5px;
  display: table-cell;
  min-height: 90px;
}
/* Style Box Post Right (This Box contains div Author) */
.postdxboxed {
  border: none;
  width: 20%;
  margin: 0 auto;
  vertical-align: middle;
  float: right;
  padding: 5px;
  margin-right: 18px;
  display: table-cell;
  min-height: 90px;
}
/* Box Author Post */
.author {
  min-width: 200px;
  min-height: 90px;
  vertical-align: middle;
}

我该如何解决这个问题？任何帮助表示赞赏：）

example

Answer 1

您可以在display:flex内水平和垂直使用center属性div parent。

将以下属性应用于您要对齐的作者parent的{{1}}。

div

更多关于Flex Box

阅读有关Flex here

的更多信息

注意：display:flex; justify-content:center; align-items:center;属性是供应商特定的。您应该使用适当的供应商前缀才能使用

Answer 2

尝试这样的事情。查看演示here

<强> HTML

<div></div>

<强> CSS

div { 宽度：100px; 身高：100px; background-color：red;

position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;

margin: auto;

}

Answer 3

HTML：

<div class="outer">
<div class="middle">
<div class="inner">

<h1>The Content</h1>

</div>
</div>
</div>

CSS：

.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}

.middle {
display: table-cell;
vertical-align: middle;
}

.inner {
margin-left: auto;
margin-right: auto; 
width: /*whatever width you want*/;
}

Answer 4

HTML

<div class="container">
  <div class="cent"></div>
</div>

CSS

*{
  margin:0;padding:0;  
}

html,body{
  height:100%;   
}
body{
  display: table; 
   margin: 0 auto;
}

.container{  
  height: 100%;
  display: table-cell;   
  vertical-align: middle;    
}
.cent{
  height:50px;
  width:50px;
  background-color:black;      
}

在html和css中的另一个div内垂直和水平居中的div

4 个答案: