中心文本水平两个div [英] Center text inside two divs horizontally

问题描述

如何我可以将这些文本水平放置在两个div之间。

我的HTML代码：

 < div class =maincontainer> 
< div class =microcontainers> 
< p class =design>< span style =color：＃F90;> D< / span> ESIGN< / p& 
< / div> 
< div class =microcontainers> 
< / div> 
< / div> 
  

我的CSS样式：

  #maincontainer {
 width：1120px; 
 height：auto; 
 background-color：＃E4E4E4; 
 margin-left：auto; 
 margin-right：auto; 
 margin-top：124px; 
 padding：40px 40px 40px 40px; 
 overflow：hidden; 
 display：block; 
 text-align：center; 
} 
 
 .microcontainers {
 width：350px; 
 height：600px; 
 border：＃999 1px solid; 
 margin：40px 40px 40px 40px; 
 padding：15px 15px 15px 15px; 
 display：inline-block; 
 overflow：hidden; 
} 
 
 .design {
 font-family：TrajanPro-Regular; 
 font-size：85px; 
 color：＃999; 
 text-align：center; 
 display：block; 
 margin：0 auto; 
} 
  

谢谢你和更多的力量！

有一些CSS更改。

>

  .microcontainers {
 width：350px; 
 height：600px; 
 border：＃999 1px solid; 
 margin：40px 40px 40px 40px; 
 padding：15px 15px 15px 15px; 
 display：inline-block; 
 overflow：hidden; 
 text-align：center; 
 position：relative; 
} 
 
 .design {
 font-family：TrajanPro-Regular; 
 font-size：85px; 
 color：＃999; 
 position：absolute; 
 left：0; 
 right：0; 
} 
  

FIDDLE

How to I can I center this texts horizontally which is inside two divs. When I'm previewing it in Dreamweaver, it is finely centered.

My HTML codes:

<div class="maincontainer">
    <div class="microcontainers">  
         <p class="design"><span style="color: #F90;">D</span>ESIGN</p>  
    </div>  
    <div class="microcontainers">  
    </div>
</div>

My CSS Style:

#maincontainer{   
    width:1120px;
    height:auto;
    background-color:#E4E4E4;
    margin-left: auto;
    margin-right: auto;
    margin-top: 124px;
    padding: 40px 40px 40px 40px;
    overflow: hidden;
    display:block;
    text-align: center; 
}

.microcontainers{
    width: 350px;
    height: 600px;
    border:  #999 1px solid;
    margin: 40px 40px 40px 40px;
    padding: 15px 15px 15px 15px;
    display: inline-block;
    overflow: hidden;
}

.design{
    font-family: TrajanPro-Regular; 
    font-size:85px;
    color: #999;
    text-align: center;
    display: block;
margin: 0 auto;
}

Thank you and more power!

解决方案

v Please try this, it may solve your problem.

There is some CSS changes.

.microcontainers{
    width: 350px;
    height: 600px;
    border:  #999 1px solid;
    margin: 40px 40px 40px 40px;
    padding: 15px 15px 15px 15px;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    position: relative;
}

.design{
    font-family: TrajanPro-Regular; 
    font-size:85px;
    color: #999;
    position: absolute;
    left:0;
    right:0;
}

FIDDLE

这篇关于中心文本水平两个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！