居中標題內容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

回答

相關問題