你如何居中浮動？

我在div標記中有三個h3標記。我試圖將所有三個h3標籤放在同一水平線上，第一個h3標籤左對齊，第二個h3標籤居中，第三個h3標籤右對齊。我在這裏找到了一個答案，發現很多，但一直沒有能夠正確實施它們。由於你如何居中浮動？

這裏是HTML5代碼

<div class="education">       
    <h3 class="date"> April 2013 – Present</h3> 
    <h3 class="place"> Sutton ON, Canada </h3> 
    <h3 class="company" > All Reasons Party Rentals </h3> 
</div>

和相應的CSS3

h3.date { 
    text-align:left; 
    display:inline-block; 
    float:left; 
} 
h3.company { 
    text-align:center; 
    display:inline-block; 
    margin-left: auto; 
    margin-right: auto; 
} 
h3.place { 
    text-align:right; 
    display:inline-block; 
    float:right; 
}

來源

2014-02-19 user3329755

我不明白與我有關的答案，我是一個相當新手。雖然它可能回答我的問題，但我似乎不能用它來解決我的問題。 – user3329755

請查看代碼

HTML

<div class="container"> 
    <div class="tabletContainer"> 


     <div class="left"> 
      <h3>April 2013 – Present</h3> 
     </div> 
     <div class="middle"> 
      <h3>All Reasons Party Rentals</h3> 
     </div> 

    </div> 
    <div class="right"> 
     <h3>Sutton ON, Canada </h3> 
    </div> 
</div>

和

CSS

/* reset browser styles */ 
    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
    table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, 
    time, mark, audio, video { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     font-size: 100%; 
     vertical-align: baseline; 
    } 

    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
     display: block; 
    } 

    body { 
     line-height: 1.2; 
    } 

    ol { 
     padding-left: 1.4em; 
     list-style: decimal; 
    } 

    ul { 
     padding-left: 1.4em; 
     list-style: square; 
    } 

    table { 
     border-collapse: collapse; 
     border-spacing: 0; 
    } 
    /* end reset browser styles */ 

    /*Fill all available spaces*/ 

    * { 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     box-sizing: border-box; 

    } 


    .container { 
     width: auto; 
    } 

     .container:after { 
      content: " "; 
      clear: both; 
      display: table; 
     } 


    .tabletContainer { 
     /*The total width for the first two column*/ 
     width: 67%; 
     float: left; 
     display: block; 
    } 



    .left { 

     float: left; 
     /*Each column takes have of the container size, so their width =67/2 = 33.5%*/ 
     width: 50%; 
    } 

    .middle { 

     float: right; 
     /*Each column takes have of the container size, so their width =67/2 = 33.5%*/ 
     width: 50%; 
    } 

    .right { 
     float: right; 
     width: 33%; 

    } 

    .right h3 { 
     float: right; 
    } 

    /*For tablet devices, show only the two columns in a row and a column underneath*/ 

    @media (min-width: 481px) and (max-width: 768px) { 
     .tabletContainer, .right { 
      float: none; 
      width: auto; 
     } 

     .right 
     { 
      clear: both; 
      width: 50%; 


     } 

     .right h3 { 
      float: left; 
     } 
    } 


    /*For mobile phones, show only one column*/ 
    @media (max-width: 480px) { 
     .tabletContainer, .left, .right, .middle { 
      float: none; 
      width: auto; 
      display: block; 
     } 
     .right h3 { 
      float: left; 
     } 



    }

的jsfiddle：

http://jsfiddle.net/KxryX/

編輯：OK賈森和扎克認爲，原來的解決方案是不響應。我已更新以使其響應。

來源

2014-02-19 23:52:35

由於多種原因，這通常是一個糟糕的主意 –

在寬度小於554px的設備或瀏覽器窗口中查看時，此建議解決方案開始崩潰。 –

@JasonAller我同意，但問題是如何安排組件，而不是響應式設計。如果需要，我會更改爲自適應設計。乾杯。 –

它看起來像你的h3.company和h3.place選擇器與他們的屬性錯誤的方式，所以佈局與HTML的順序戰鬥。

但是，我認爲這會工作：

.education h3 {float:left;padding:0;margin:0;width:33.333%;} 

h3.date {text-align:left;} 
h3.place {text-align:center;} 
h3.company {text-align:right;}

在這裏工作，對標題彩色背景，所以你可以看到什麼寬度是： http://jsfiddle.net/QfAeA/

一個運行的怎麼下來作品：

所有3個標題浮動，並給予相同的寬度，三分之一的可用空間，所以他們同樣分享
的空白和邊距已設置爲0，所以它不會讓他們寬於33.333％和破壞佈局
然後你只需要處理文本對齊方式爲每一個標題

希望這有助於。

來源

2014-02-19 23:56:42

您的是最好的答案，並感謝您的詳細解釋。 – HackerKarma

我會在容器上使用text-align:center，在這種情況下使用body，並將兩者浮在外面。這允許任何元素的任何（或變化的）寬度，同時保持完全對齊。在小屏幕上則變成一個垂直佈局，以超前的花車適合

body { text-align:center; } 
h3.date { 
    text-align:left; 
    float:left; 
} 
h3.company { 
    margin:20px auto; 
    display:inline-block; 
} 
h3.place { 
    text-align:right; 
    float:right; 
}

Demo

如果你希望公司的名字留在小屏幕上別人的頂部，它的位置在HTML

來源

2014-02-20 01:53:53

你如何居中浮動？

回答

相關問題