調整大小的中心內聯div？

我對html和CSS挺新的。最近遇到了一個大問題。調整大小的中心內聯div？

我在另一個部門有2個師。這兩個div都沒有幾個按鈕等，並且彼此相鄰 - 內聯。但是，當我試圖儘量減少我的鉻窗口，第二個div在1日下移動，這非常棒。但是，它們都與屏幕左側對齊。我怎麼能讓他們堅持中心？

由於我不知道如何更好地解釋，下面是一些圖像。

的部門如何看待這樣的：當我調整瀏覽器

會發生什麼：

我想調整大小會發生什麼：

我真心希望有人能提供某種類型的建議。

非常感謝！

來源

2015-09-27 Miqro

你有，你可以發佈任何代碼？將有助於看到你的工作。 –

您可以通過添加文本對齊來居中內聯元素：center;到容器元件。

.container { 
    text-align: center; 
}

，如果你不想再爲中心的元素中的文本......

.container * { 
    text-align: left; 
}

來源

2015-09-27 01:02:37 Joseph

謝謝，這個簡單的解決方案修復了它。 :-) – Miqro

試試這個：

給外div（父容器），一個text-align: center。

由於孩子的div是inline，在家長可以控制自己的對齊text-align財產。

來源

2015-09-27 01:06:43

我假設你的問題是你對水平居中感興趣，而不是垂直居中感。

我對HTML/CSS也很新，但在過去的幾周裏，我發現flex設備非常有用。使用https://css-tricks.com/snippets/css/a-guide-to-flexbox/已被證明是最有幫助的。

下面的HTML和CSS文件說明了如何使用flex來達到預期的效果。

HTML

<!DOCTYPE html> 

<html> 
    <head> 
     <meta charset = "utf-8"> 

     <meta name = "viewport" 
       content = "width = device-width, initial-scale = 1.0" 
     > 

     <link href = "CSS/Example.css" 
       rel = "stylesheet" 
       type = "text/css" 
     > 
    </head> 

    <body> 
     <div id = "entire-page" 
      class = "empty-cell" 
     > 
      <div id = "inner-div-1" 
       class = "empty-cell" 
      > 
      </div> 

      <div id = "inner-div-2" 
       class = "empty-cell" 
      > 
      </div> 
     </div> 
    </body> 
</html>

CSS

html, 
* 
{ 
    border  : 0; 
    box-sizing : border-box; 
    margin : 0; 
    padding  : 0; 
} 

.empty-cell 
{ 
    min-height : 1px; 
} 

#entire-page 
{ 
    align-content : flex-start; 
    background-color : blue; 
    display   : flex; 
    flex-wrap  : wrap; 
    float   : left; 
    height   : 100vh; 
    justify-content : center; 
    width   : 100%; 
} 

#inner-div-1 
{ 
    background-color : red; 
    display : block; 
    float : left; 
    height   : 200px; 
    width   : 400px; 
} 

#inner-div-2 
{ 
    background-color : yellow; 
    display : block; 
    float : left; 
    height   : 200px; 
    width   : 400px; 
}

我用柔性包裝：包裝，以使第二個div會換到下一行，當不再有足夠的空間供雙方在一行。

我用justify-content：center來水平居中flex-box的內容（即兩個inner-div的內容）。

我用對齊內容：FLEX-開始垂直顯示它們時保持兩個內部div的一起，否則他們將被均勻地分佈在整個Flex-箱隔開。

如果您對這個回答任何問題，那麼請隨時問他們。

來源

2015-09-27 02:11:30 toonice

調整大小的中心內聯div？

回答

相關問題