Ниже приведен список решений для центрирования объектов в CSS по горизонтали. Фрагмент включает в себя все из них.
html {
font: 1.25em/1.5 Georgia, Times, serif;
}
pre {
color: #fff;
background-color: #333;
padding: 10px;
}
blockquote {
max-width: 400px;
background-color: #e0f0d1;
}
blockquote > p {
font-style: italic;
}
blockquote > p:first-of-type::before {
content: open-quote;
}
blockquote > p:last-of-type::after {
content: close-quote;
}
blockquote > footer::before {
content: "\2014";
}
.container,
blockquote {
position: relative;
padding: 20px;
}
.container {
background-color: tomato;
}
.container::after,
blockquote::after {
position: absolute;
right: 0;
bottom: 0;
padding: 2px 10px;
border: 1px dotted #000;
background-color: #fff;
}
.container::after {
content: ".container-" attr(data-num);
z-index: 1;
}
blockquote::after {
content: ".quote-" attr(data-num);
z-index: 2;
}
.container-4 {
margin-bottom: 200px;
}
/**
* Solution 1
*/
.quote-1 {
max-width: 400px;
margin-right: auto;
margin-left: auto;
}
/**
* Solution 2
*/
.container-2 {
text-align: center;
}
.quote-2 {
display: inline-block;
text-align: left;
}
/**
* Solution 3
*/
.quote-3 {
display: table;
margin-right: auto;
margin-left: auto;
}
/**
* Solution 4
*/
.container-4 {
position: relative;
}
.quote-4 {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/**
* Solution 5
*/
.container-5 {
display: flex;
justify-content: center;
}
<main>
<h1>CSS: Horizontal Centering</h1>
<h2>Uncentered Example</h2>
<p>This is the scenario: We have a container with an element inside of it that we want to center. I just added a little padding and background colors so both elements are distinquishable.</p>
<div class="container container-0" data-num="0">
<blockquote class="quote-0" data-num="0">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
<h2>Solution 1: Using <code>max-width</code> & <code>margin</code> (IE7)</h2>
<p>This method is widely used. The upside here is that only the element which one wants to center needs rules.</p>
<pre><code>.quote-1 {
max-width: 400px;
margin-right: auto;
margin-left: auto;
}</code></pre>
<div class="container container-1" data-num="1">
<blockquote class="quote quote-1" data-num="1">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
<h2>Solution 2: Using <code>display: inline-block</code> and <code>text-align</code> (IE8)</h2>
<p>This method utilizes that <code>inline-block</code> elements are treated as text and as such they are affected by the <code>text-align</code> property. This does not rely on a fixed width which is an upside. This is helpful for when you don’t know the number of elements in a container for example.</p>
<pre><code>.container-2 {
text-align: center;
}
.quote-2 {
display: inline-block;
text-align: left;
}</code></pre>
<div class="container container-2" data-num="2">
<blockquote class="quote quote-2" data-num="2">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
<h2>Solution 3: Using <code>display: table</code> and <code>margin</code> (IE8)</h2>
<p>Very similar to the second solution but only requires to apply rules on the element that is to be centered.</p>
<pre><code>.quote-3 {
display: table;
margin-right: auto;
margin-left: auto;
}</code></pre>
<div class="container container-3" data-num="3">
<blockquote class="quote quote-3" data-num="3">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
<h2>Solution 4: Using <code>translate()</code> and <code>position</code> (IE9)</h2>
<p>Don’t use as a general approach for horizontal centering elements. The downside here is that the centered element will be removed from the document flow. Notice the container shrinking to zero height with only the padding keeping it visible. This is what <i>removing an element from the document flow</i> means.</p>
<p>There are however applications for this technique. For example, it works for <b>vertically</b> centering by using <code>top</code> or <code>bottom</code> together with <code>translateY()</code>.</p>
<pre><code>.container-4 {
position: relative;
}
.quote-4 {
position: absolute;
left: 50%;
transform: translateX(-50%);
}</code></pre>
<div class="container container-4" data-num="4">
<blockquote class="quote quote-4" data-num="4">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
<h2>Solution 5: Using Flexible Box Layout Module (IE10+ with vendor prefix)</h2>
<p></p>
<pre><code>.container-5 {
display: flex;
justify-content: center;
}</code></pre>
<div class="container container-5" data-num="5">
<blockquote class="quote quote-5" data-num="5">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
</main>
display: flex
.container {
display: flex;
justify-content: center;
}
Примечания:
max-width
и margin
Вы можете центрировать элемент уровня блока по горизонтали, назначив фиксированную ширину и установив margin-right
и margin-left
на auto
.
.container ul {
/* for IE below version 7 use `width` instead of `max-width` */
max-width: 800px;
margin-right: auto;
margin-left: auto;
}
Примечания:
- Контейнер не нужен ????
- Требуется, чтобы была известна (максимальная) ширина центрированного элемента ????
IE9+: transform: translatex(-50%)
и left: 50%
Это похоже на причудливый метод центрирования, который использует абсолютное позиционирование и отрицательные поля.
.container {
position: relative;
}
.container ul {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
Примечания:
- Центральный элемент будет удален из потока документов. Все элементы будут полностью игнорировать центрированный элемент. ????????????
- Этот метод позволяет вертикально центрировать, используя
top
вместо left
и translateY()
вместо translateX()
. Их можно даже совмещать. ????
- Поддержка браузера:
transform2d
IE8+: display: table
и margin
Как и в первом решении, вы используете автоматические значения для правого и левого полей, но не назначаете ширину. Если вам не нужна поддержка IE7 и ниже, это лучше подходит, хотя использование значения свойства table
для display
кажется несколько хакерским.
.container ul {
display: table;
margin-right: auto;
margin-left: auto;
}
IE8+: display: inline-block
и text-align
Также возможно центрирование элемента, как если бы вы делали это с обычным текстом. Недостаток: вам нужно присвоить значения как контейнеру, так и самому элементу.
.container {
text-align: center;
}
.container ul {
display: inline-block;
/* One most likely needs to realign flow content */
text-align: initial;
}
Примечания:
- Не требует указания (максимальной) ширины ????
- Выравнивает содержимое потока по центру (потенциально нежелательный побочный эффект) ????
- Хорошо работает с динамическим количеством элементов меню (например, в случаях, когда вы не можете знать ширину, которую займет один элемент) ????
person
kleinfreund
schedule
05.06.2013