如何使用其他元素在列表中居中放置圖像

Question

我有一個無序列表，其中包含幾個列表元素。裏面還有一個要居中的圖像元素。我嘗試使用margin來對其進行居中：auto;屬性，但由於列表元素在側面，因此在對中時需要考慮這一點。我如何將圖像置於其容器中？

.nav { 
 
    width: 1280px; 
 
    margin: 0 auto; 
 
    font-size: 16px; 
 
    font-weight: 500; 
 
    border: 1px solid black; 
 
} 
 

 
.nav li { 
 
    float: left; 
 
    vertical-align: top; 
 
    margin: 5px 10px; 
 
} 
 

 
nav li:first-child { 
 
    margin-left: 75px; 
 
} 
 

 
.nav img { 
 
    display: block; 
 
    margin: auto; 
 
    height: 21px; 
 
    width: 24px; 
 
}

<nav class="nav"> 
 
    <ul class="clearfix"> 
 
    <li>Home</li> 
 
    <li>Moments</li> 
 
    <li>Notifications</li> 
 
    <li>Messages</li> 
 
    <img src="assets/image/twitter-icon.png" alt="Twitter Icon"> 
 
    </ul> 
 
</nav>

Answer 1

您可能需要圖像absolute定位到使用nav元件：

position: absolute; 
left: 50%; 
transform: translateX(-50%); 

另外position:relative的nav元件。

這樣，圖像忽略nav元素內的任何內容。

body{ 
 
margin:0px; 
 
} 
 

 
.nav { 
 
    width: 1280px; 
 
    margin: 0 auto; 
 
    font-size: 16px; 
 
    font-weight: 500; 
 
    border: 1px solid black; 
 
    position:relative; 
 
} 
 

 
.nav li { 
 
    vertical-align: top; 
 
    margin: 5px 10px; 
 
    display: inline; 
 
} 
 

 
nav li:first-child { 
 
    margin-left: 75px; 
 
} 
 

 
.nav img { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    height: 21px; 
 
    width: 24px; 
 
}

<nav class="nav"> 
 
    <ul class="clearfix"> 
 
    <li>Home</li> 
 
    <li>Moments</li> 
 
    <li>Notifications</li> 
 
    <li>Messages</li> 
 
    <img src="assets/image/twitter-icon.png" alt="Twitter Icon"> 
 
    </ul> 
 
</nav>

Answer 2

把你img元素插入li，並做一些改變你的CSS像下面片段：

.nav ul { 
 
    width: 800px; 
 
    margin: 0 auto; 
 
    font-size: 16px; 
 
    font-weight: 500; 
 
    border: 1px solid black; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    text-align: center; 
 
} 
 

 
.nav li { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin: 5px 10px; 
 
} 
 

 
.nav img { 
 
    display: block; 
 
    margin: auto; 
 
} 
 

 
.nav ul:before, 
 
.nav ul:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 

 
.nav ul:after { 
 
    clear: both; 
 
}

<!--html--> 
 
<nav class="nav"> 
 
    <ul class="clearfix"> 
 
    <li>Home</li> 
 
    <li>Moments</li> 
 
    <li>Notifications</li> 
 
    <li>Messages</li> 
 
    <li><img src="//login.create.net/images/icons/user/twitter_30x30.png" alt="Twitter Icon"></li> 
 
    </ul> 
 
</nav>

Answer 3

您可以使用display:inline-block得到它。

.nav img { 
    display: inline-block; /*Add this*/ 
    vertical-align: middle; /*Add this*/ 
    height: 21px; 
    width: 24px; 
} 

.nav li { 
    display:inline-block; /*Add this*/ 
    vertical-align: middle; /*Add this*/ 
    margin: 5px 10px; 
} 

.nav { 
    text-align:center; /*Add this*/ 
} 

.nav { 
 
    width: 1280px; 
 
    margin: 0 auto; 
 
    font-size: 16px; 
 
    font-weight: 500; 
 
    border: 1px solid black; 
 
    text-align:center; 
 
} 
 

 
.nav li { 
 
    display:inline-block; 
 
    vertical-align: middle; 
 
    margin: 5px 10px; 
 
} 
 

 
nav li:first-child { 
 
    margin-left: 75px; 
 
} 
 

 
.nav img { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    height: 21px; 
 
    width: 24px; 
 
}

<nav class="nav"> 
 
    <ul class="clearfix"> 
 
    <li>Home</li> 
 
    <li>Moments</li> 
 
    <li>Notifications</li> 
 
    <li>Messages</li> 
 
    <img src="http://lorempixel.com/200/200/" alt="Twitter Icon"> 
 
    </ul> 
 
</nav>

Answer 4

1）所有元素來中心

.nav { 
    width: 1280px; 
    margin: 0 auto; 
    font-size: 16px; 
    font-weight: 500; 
    border: 1px solid black; 
} 

.nav li { 
    float: left;<------Remove 
    display: inline-block;<-----------Add 
    vertical-align: top; 
    margin: 5px 10px; 
} 


nav li:first-child { 
    margin-left: 75px;<---------Change to margin-left: 0px;------ 
} 

.nav img { 
    display: block;<----------Change to display: inline-block;--- 
    margin: auto;<---------Remove 
    height: 21px; 
    width: 24px; 
} 

.clearfix{<-----------Add this Selector 
    text-align: center; 
    width: 100%; 
    padding-left: 0; 
} 

全碼：

.nav { 
 
    width: 1280px; 
 
    margin: 0 auto; 
 
    font-size: 16px; 
 
    font-weight: 500; 
 
    border: 1px solid black; 
 
} 
 

 
.nav li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin: 5px 10px; 
 
} 
 

 

 
nav li:first-child { 
 
    margin-left: 0px; 
 
} 
 

 
.nav img { 
 
    display: inline-block; 
 
    height: 21px; 
 
    width: 24px; 
 
} 
 

 
.clearfix{ 
 
    text-align: center; 
 
    width: 100%; 
 
    padding-left: 0; 
 
}

<nav class="nav"> 
 
    <ul class="clearfix"> 
 
     <li>Home</li> 
 
     <li>Moments</li> 
 
     <li>Notifications</li> 
 
     <li>Messages</li> 
 
     <img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" alt="Twitter Icon"> 
 
    </ul> 
 
    </nav>

2）只要圖像是中心

.nav { 
    width: 1280px; 
    margin: 0 auto; 
    font-size: 16px; 
    font-weight: 500; 
    border: 1px solid black; 
    position: relative;<---------Add 
} 


.nav li { 
    float: left;<---------remove 
    vertical-align: top; 
    margin: 5px 10px; 
} 



nav li:first-child { 
    margin-left: 75px; 
} 

.nav img { 
    display: block;<-------Change To display: inline-block;--- 
    margin: auto;<----------remove--------- 
    right: 0;<--------------Add 
    position: absolute;<-------------Add 
    height: 21px; 
    width: 24px; 
} 

.clearfix { <----------------Add 
    width: 50%; 
    padding-left: 0; 
    position: relative; 
} 

全碼：

.nav { 
 
    width: 1280px; 
 
    margin: 0 auto; 
 
    font-size: 16px; 
 
    font-weight: 500; 
 
    border: 1px solid black; 
 
    position: relative; 
 
} 
 

 
.nav li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    margin: 5px 10px; 
 

 
} 
 

 
nav li:first-child { 
 
    margin-left: 75px; 
 
} 
 

 
.nav img { 
 
    display: inline-block; 
 
    height: 21px; 
 
    width: 24px; 
 
    right: 0; 
 
    position: absolute; 
 
} 
 

 
.clearfix { 
 
     width: 50%; 
 
     padding-left: 0; 
 
     position: relative; 
 
}

<nav class="nav"> 
 
    <ul class="clearfix"> 
 
     <li>Home</li> 
 
     <li>Moments</li> 
 
     <li>Notifications</li> 
 
     <li>Messages</li> 
 
     <img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" alt="Twitter Icon"> 
 
    </ul> 
 
    </nav>