[英]How to center navigation that has icons so text is aligned to icons?
I am trying to create the navigation as per the picture below, where the text is centered aswell as the icon, but the text is left aligned to the icon. 我正在尝试根据下面的图片创建导航,其中文本居中以及图标居中,但文本与图标对齐。 The link needs to be the width of its container, this also needs to be responsive:
链接必须是其容器的宽度,这也需要响应:
How do you go about this? 您如何处理?
CODEPEN DEMO HERE CODEPEN演示在这里
HTML 的HTML
<ul class="mobile-home-section">
<li><a href="#">PROPERTY</a></li>
<li><a href="#">FUTURE PLANNING</a></li>
<li><a href="#">COMMERICAL</a></li>
</ul>
CSS 的CSS
.mobile-home-section {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
background: #163158
}
.mobile-home-section li {
background-image: url('http://s18.postimg.org/m26o71ohx/icon_future_hover.png');
background-repeat: no-repeat;
background-position: 0 10px;
padding-left: 50px;
}
.mobile-home-section li a {
color: white;
text-decoration: none;
padding: 20px 0;
display: block;
border-bottom: 1px solid white;
}
EDIT Changed the code to make it responsive 编辑 更改了代码以使其响应
If i was you, I would not place the icon for the link as a background image. 如果我是您,则不会将链接的图标放置为背景图像。 I would place the icon as an image inside of the link tag.
我会将图标作为图像放置在链接标记中。
HTML 的HTML
<div class="container">
<ul class="mobile-home-section">
<li>
<a href="#">
<span><img src="img2.jpg">PROPERTY</span>
</a>
</li>
<li>
<a href="#">
<span><img src="img2.jpg">FUTURE PLANNING</span>
</a>
</li>
<li>
<a href="#">
<span><img src="img3.jpg">COMMERICAL</span>
</a>
</li>
</ul>
</div>
CSS 的CSS
.container {
background: #273F87;
}
ul.mobile-home-section {
display: block;
list-style-type: none;
padding: 0px;
}
ul.mobile-home-section li:nth-child(2) {
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
ul.mobile-home-section li a {
display: block;
color: #fff;
padding: 0px;
font-family: serif;
margin: 0px auto;
text-decoration: none;
}
ul.mobile-home-section li a span img {
width: 50px;
height: 50px;
padding-right:20px;
display: inline-block;
vertical-align: middle;
}
ul.mobile-home-section li a span {
padding: 10px 0px;
width: 230px;
display:block;
margin: auto;
}
As others have said, it's going to be easier using an image. 正如其他人所说,使用图像将变得更加容易。 The most important thing to know is that not all
display:
values support vertical alignment - my go-to is display: inline-block
, but if you're using flexbox it might be more convenient to use display: flex
要知道的最重要的一点是,并非所有
display:
值都支持垂直对齐-我的首选是display: inline-block
,但是如果您使用的是flexbox,则使用display: flex
可能更方便
Depending on context, I typically use one of these three solutions: 根据具体情况,我通常使用以下三种解决方案之一:
Here are examples of each of those. 这里是每个例子。
Notes: 笔记:
<li>
loses its bullet and gets an auto width (it's as wide as its contents) - depending on your context, you might want to add on a width: 100%
to #or-another li
<li>
丢失其项目符号并获得自动宽度(它等于其内容的宽度)-根据您的上下文,您可能希望添加一个width: 100%
#or-another li
background: no-repeat center center; -webkit-background-size: cover; background-size: cover; background-image:url(...);
background: no-repeat center center; -webkit-background-size: cover; background-size: cover; background-image:url(...);
的容器相同,则为background: no-repeat center center; -webkit-background-size: cover; background-size: cover; background-image:url(...);
background: no-repeat center center; -webkit-background-size: cover; background-size: cover; background-image:url(...);
#or-another span
instead of #or-another li > *
, and you could drop #one-more li span {...}
entirely #or-another span
而不是#or-another li > *
,并且可以完全放弃#one-more li span {...}
#one-way li > * { display: inline-block; vertical-align: middle; } #or-another li { display: table; } #or-another li > * { display: table-cell; vertical-align: middle; } #one-more li span { display: inline-block; vertical-align: middle; } #one-more li:before { content:''; width: 200px; height: 200px; display: inline-block; vertical-align: middle; background:url('https://placehold.it/200x200'); }
<ul id="one-way"> <li> <img src="https://placehold.it/200x200" alt="" /> <span>1</span><!-- or div or p or what have you --> </li> </ul> <ul id="or-another"> <li> <img src="https://placehold.it/200x200" alt="" /> <span>2</span> </li> </ul> <ul id="one-more"> <li> <span>3</span> </li> </ul>
Add a text-align: center;
添加
text-align: center;
in the .mobile-home-section
class to make them align to the center and remove the padding-left: 50px;
在
.mobile-home-section
类中,使其与中心对齐并删除padding-left: 50px;
under .mobile-home-section li
class. 在
.mobile-home-section li
类下。 And these two CSS will become: 这两个CSS将变为:
.mobile-home-section {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
background: #163158;
text-align: center;
}
.mobile-home-section li {
background-image: url('http://s18.postimg.org/m26o71ohx/icon_future_hover.png');
background-repeat: no-repeat;
background-position: 0 10px;
}
Try just editing the paddings and background-position. 尝试仅编辑填充和背景位置。
.container {
width: 600px;
}
.mobile-home-section {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
background: #163158
}
.mobile-home-section li {
background-image: url('http://s18.postimg.org/m26o71ohx/icon_future_hover.png');
background-repeat: no-repeat;
background-position:50% 15px;
padding-left: 50px;
}
.mobile-home-section li a {
color: white;
text-decoration: none;
padding: 20px 50%;
display: block;
border-bottom: 1px solid white;
text-align:left;
}
UPDATE try this 更新尝试这个
.mobile-home-section li a {
color: white;
text-decoration: none;
padding: 20px 0 20px 50%;
display: block;
border-bottom: 1px solid white;
text-align: left;
}
Update the padding of .mobile-home-section li a 更新.mobile-home-section li的填充
The selectors could use some love, but here is my codepen: 选择器可能会用一些爱,但这是我的代码笔:
<div class="container">
<ul class="mobile-home-section">
<li><a href="#"><span><img src="http://s18.postimg.org/m26o71ohx/icon_future_hover.png" /><span>PROPERTY</span></span></a>
</li>
<li><a href="#"><span><img src="http://s18.postimg.org/m26o71ohx/icon_future_hover.png" /><span>FUTURE PLANNING</span></span></a>
</li>
<li><a href="#"><span><img src="http://s18.postimg.org/m26o71ohx/icon_future_hover.png" /><span>COMMERICAL</span></span></a>
</li>
</ul>
.container {
width: 600px;
}
.mobile-home-section {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
background: #163158
}
.mobile-home-section li {
margin: 0;
padding: 0;
}
.mobile-home-section li a {
display: block;
height: 3em;
}
.mobile-home-section li a > span {
display: block;
width: 55%;
padding: 0;
margin: 0 auto;
text-align: left;
}
.mobile-home-section li a > span > span {
line-height: 2em;
font-size: 1.4em;
position: relative;
top: -0.4em;
}
.mobile-home-section li span img {
margin-right: 0.75em;
height: 2.6em;
position: relative;
top: 0.2em;
}
.mobile-home-section li a {
border-bottom: 1px solid white;
color: white;
display: block;
font-family: 'Times New Roman';
font-size: 1.2em;
padding: 0;
text-align: center;
text-decoration: none;
}
http://codepen.io/anon/pen/PZwvZz http://codepen.io/anon/pen/PZwvZz
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.