CSS/HTML中心框

我看着這個美麗的網頁設計，注意框是如何完美地居中在屏幕中間，我瀏覽了頁面的源代碼，但它對我來說並沒有什麼意義。CSS/HTML中心框

（Web site Link to view full example, click here）

所有我可以真正做出來的是，他們正在使用，下面的代碼在自己的樣式表的頂部。

*, *:before, *:after { 
    box-sizing: border-box; 
}

總之，我想知道什麼是居中的盒子一樣在屏幕中央圖像上的最簡單，最有效的方法。

來源

2016-10-06 Marilee

看看'＃preview-container-id'風格。這就是它的中心。他們使用相同的風格，或者甚至引導引導程序庫。看看它[這裏]（http://getbootstrap.com/） – choz

應用要居中一個margin: 0 auto;箱。

雖然您還需要確保項目可以居中。爲此，請將其寬度更正爲小於HTML <body>的整個寬度。

正如你可以在這個圖片中看到，真正的魔力是由下面的代碼完成：

#preview-container-id { 
    margin: 0 auto; 
    width: 70%; 
}

有了這一點，他們在執行我的回答中提到的兩個步驟。

如果您取消激活這兩個屬性，您會注意到該框始終位於左側。

而就像盧克羅伯遜提到的，有不同的方法來解決這個問題。我的解決方案是針對塊級項目，但如果您有內聯級項目，則此解決方案根本無法工作。

回答爲評論Q記者：

的box-sizing: border-box總結了所有的累積寬度和高度由邊距和填充有用於元件限定的大小設置。

注意突出顯示的元素沒有留下填充與邊界框活躍的大小：

你看到：

現在，左填充主動檢查寬度任何改變？

現在，讓我們去激活邊界框和離開填充上：

現在這個相貌醜陋，這也正是border-box防止

正如你可以在報價看from this CSS-Tricks post：

這通常被稱爲「萬能盒子大小」，它是一種很好的工作方式！您設置的（文字）寬度是您獲得的寬度，而不必執行心算，並管理來自多個屬性寬度的複雜度。

不，你不需要設置在<body>或<html>標籤任何額外的CSS，因爲他們已經配備了所需的性能，讓你點塊級項目:)

來源

2016-10-06 04:12:32

謝謝安東尼奧，'*，*：之前，*：究竟是什麼？：：box-sizing：border-box; }'做？我在W3Schools上搜索了'box-sizing'，但他們的例子不是很好 – Marilee

我也必須將任何CSS應用到'body，html'以保持它居中？ – Marilee

@Marilee，編輯我的答案添加你的q的 –

HTML：

<div class="center-me"> 
//div content 
</div>

CSS：

.center-me { 
    margin: 0 auto; 
    width: 80%; 
}

有不同的方式來做到這一點，這取決於我˚F你的父元素是塊還是不

來源

2016-10-06 04:14:51

-1

HTML：

<div class='parent_element'> 
    <div class='child_element'> 
    </div> 
</div>

CSS：

.parent_element{ 
    float:left;width:100%;text-align:center; 
} 
.child_element{ 
    float:none;display:block;margin:0 auto;width:80%; 
}

來源

2016-10-06 04:17:57

爲什麼浮動左邊的父，在div上設置100％的寬度，文本對齊中心呢？然後在子上設置浮動none（divs不會自然浮動），並且它們都準備好了塊元素... 只需要2個pess，您需要的是最後2個規則 –

僅限邊距：0 auto;如果你不給100％寬度和float：left或display：block給它的父div，它將不起作用。如果子元素只是顯示塊而不是它的工作，但如果不是，你應該給浮動：沒有與保證金一起工作：0自動;和父元素給文本對齊中心，因爲如果沒有給予居中對齊比子元素可以浮動左或遵循繼承風格 –

http://codepen.io/anon/pen/LRZgmQ divs默認爲100％，你不需要浮動任何東西... –

您還可以使用Flexbox的以水平和垂直中心：

window.onload = (function() { 
 
    var container = document.getElementById('container'); 
 
    container.style.width = window.innerWidth + 'px'; 
 
    container.style.height = window.innerHeight + 'px'; 
 
}); // end window.onload

body { 
 
    background-color: ivory; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#container { 
 
    display: flex; 
 
} 
 
#box { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid red; 
 
    background: skyblue; 
 
    margin: auto; 
 
}

<div id='container'> 
 
    <span id='box'>Box centered horizontally and vertically.</span> 
 
</div>

來源

2016-10-06 04:27:42 markE

他們採取了一個div體起動後

 <div id="preview-container-id">

然後，他們運用CSS來他們

查看這些，你就會明白什麼是該鏈接，你必須要去提供

Image 1

Image 2

來源

2016-10-06 04:42:13

回答

相關問題