居中标题内容div

我无法集中名为“一”和“二”的div。他们需要保持他们的风格，使他们保持并排和边缘，但也是中心，这是我无法解决的问题？居中标题内容div

另外导航div需要居中，我已经实现了下面的样式。

#header { 
 
    position: relative; 
 
    overflow: hidden; 
 
    min-width:300px; 
 
    height:auto; 
 
    text-align: center; 
 
    border-bottom:1px solid #ccc; 
 
    padding-bottom:5px; 
 
    margin: 0 5px 0 5px; 
 
} 
 
#header #one { 
 
\t \t font: 1.625em "Arial Black", Helvetica, sans-serif; 
 
\t \t font-weight:100; 
 
\t \t float: left; 
 
\t \t color:#95061e; 
 
\t \t margin-bottom:10px; 
 
\t } 
 
#header #two { 
 
\t \t font:1.625em Arial, Helvetica, sans-serif; 
 
\t \t float:left; 
 
\t \t margin-top:3px; 
 
\t \t margin-left:3px; 
 
\t \t margin-right:5px; 
 
\t \t color:#953606; 
 
\t }

<div id="header"> 
 
    <div id="one">Birch</div> 
 
    <div id="two">Wood</div> 
 
     <div class="nav_active"><A href="#"></A></div> 
 
     <div class="nav_inactive"><A href="#"></A></div> 
 
     <div class="nav_inactive"><A href="#"></A></div> 
 
     <div class="nav_inactive"><A href="#"></A></div> 
 
     <div class="nav_inactive"><A href="#"></A></div> 
 
    </div>

来源

2016-01-20 p deman

怎么样的导航链接'了'？目前尚不清楚你的布局预计会是什么样子。 –

你可以使用一个包装，并给它一个宽度，使它使用margin auto来居中; ：检查这个小提琴https://jsfiddle.net/errhunter/upmcjr64/ –

使用display:inline-block;代替float:left;。

#header { 
 
    position: relative; 
 
    overflow: hidden; 
 
    min-width:300px; 
 
    height:auto; 
 
    text-align: center; 
 
    border-bottom:1px solid #ccc; 
 
    padding-bottom:5px; 
 
    margin: 0 5px 0 5px; 
 
} 
 
#header #one { 
 
\t \t font: 1.625em "Arial Black", Helvetica, sans-serif; 
 
\t \t font-weight:100; 
 
\t \t display:inline-block; 
 
\t \t color:#95061e; 
 
\t \t margin-bottom:10px; 
 
\t } 
 
#header #two { 
 
\t \t font:1.625em Arial, Helvetica, sans-serif; 
 
\t \t display:inline-block; 
 
\t \t margin-top:3px; 
 
\t \t margin-left:3px; 
 
\t \t margin-right:5px; 
 
\t \t color:#953606; 
 
\t }

<div id="header"> 
 
    <div id="one">Birch</div> 
 
    <div id="two">Wood</div> 
 
     <div class="nav_active"><A href="#"></A></div> 
 
     <div class="nav_inactive"><A href="#"></A></div> 
 
     <div class="nav_inactive"><A href="#"></A></div> 
 
     <div class="nav_inactive"><A href="#"></A></div> 
 
     <div class="nav_inactive"><A href="#"></A></div> 
 
    </div>

来源

2016-01-20 11:43:15 Gvidas

删除在你的CSS浮动，如下图所示。 https://jsfiddle.net/dy8bzuv3/

如果你想同时拥有的div在一行，只需添加display:inline;到你的CSS规则#one和也#two

来源

2016-01-20 11:43:13 Aer0

使用此代码：

#header { 
    position: relative; 
    overflow: hidden; 
    height:auto; 
    text-align: center; 
    border-bottom:1px solid #ccc; 
    padding-bottom:5px; 
    margin: 0 auto; 
} 
#header #one { 
     font: 1.625em "Arial Black", Helvetica, sans-serif; 
     font-weight:100; 
     color:#95061e; 
     margin-bottom:10px;display:inline-block; 
    } 
#header #two { 
     font:1.625em Arial, Helvetica, sans-serif;margin-top:3px; 
    display:inline-block; 
     color:#953606; 
    }

的jsfiddle链接click here

来源

2016-01-20 11:44:05

好运气在你的学习之旅！我在这里所做的更改是#one和#two divs正在给予display:inline。这将对待它们与文本类似，所以文本对齐选项适用于它们。

#header { 
 
    position: relative; 
 
    overflow: hidden; 
 
    min-width:300px; 
 
    height:auto; 
 
    text-align: center; 
 
    border-bottom:1px solid #ccc; 
 
    padding-bottom:5px; 
 
    margin: 0 5px 0 5px; 
 
} 
 
#header #one { 
 
\t \t font: 1.625em "Arial Black", Helvetica, sans-serif; 
 
\t \t font-weight:100; 
 
\t \t color:#95061e; 
 
\t \t margin-bottom:10px; 
 
    display: inline; 
 
\t } 
 
#header #two { 
 
\t \t font:1.625em Arial, Helvetica, sans-serif; 
 
\t \t margin-top:3px; 
 
\t \t margin-left:3px; 
 
\t \t margin-right:5px; 
 
\t \t color:#953606; 
 
    display: inline; 
 
\t }

<div id="header"> 
 
    <div id="one">Birch</div> 
 
    <div id="two">Wood</div> 
 
     <div class="nav_active"><A href="#"></A></div> 
 
     <div class="nav_inactive"><A href="#"></A></div> 
 
     <div class="nav_inactive"><A href="#"></A></div> 
 
     <div class="nav_inactive"><A href="#"></A></div> 
 
     <div class="nav_inactive"><A href="#"></A></div> 
 
    </div>

来源

2016-01-20 11:45:37

居中标题内容div

回答

相关问题