<ul>aを a の中央に配置しようとしてい<div>ます。私は次のことを試しました
text-align: center;
と
left: 50%;
これは機能していません。
CSS :
.container {
clear: both;
width: 800px;
height: 70px;
margin-bottom: 10px;
text-align: center;
}
.container ul {
padding: 0 0 0 20px;
margin: 0;
list-style: none;
}
.container ul li {
margin: 0;
padding: 0;
}
ulをコンテナの中央に配置したい。
以下は、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&marginmargin-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;
}
注:
transform: translatex(-50%)&left: 50%これは、絶対配置と負のマージンを使用する風変わりなセンタリング方法に似ています。
.container {
position: relative;
}
.container ul {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
注:
toplefttranslateY()translateX()transform2ddisplay: table&margin最初のソリューションと同様に、左右の余白に自動値を使用しますが、幅は割り当てません。tableIE7 以下をサポートする必要がない場合は、これの方が適していますが、 のプロパティ値を使用するのはややハックに感じられdisplayます。
.container ul {
display: table;
margin-right: auto;
margin-left: auto;
}
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;
}
ノート：
UL auto の左右のマージンを作成し、幅を割り当てます。
#headermenu ul {
margin: 0 auto;
width: 620px;
}
編集: kleinfreund が示唆したように、コンテナーを中央揃えにして ul をインライン ブロック表示にすることもできますが、LI に左フロートまたはインライン表示を与える必要もあります。
#headermenu {
text-align: center;
}
#headermenu ul {
display: inline-block;
}
#headermenu ul li {
float: left; /* or display: inline; */
}
ul {
width: 90%;
list-style-type:none;
margin:auto;
padding:0;
position:relative;
left:5%;
}
これで問題が解決したことを確認できます...
#headermenu ul{
text-align: center;
}
#headermenu li {
list-style-type: none;
display: inline-block;
}
#headermenu ul li a{
float: left;
}