[英]Vertically aligning image and text on list items with CSS
I am trying to vertically align an image on the left, and text on the right using the <li>
to create two columns, like this: 我试图使用
<li>
在左侧使图像垂直对齐,在右侧使文本对齐,如下所示:
space space space text1 space space space text1
space [image] space text2 space [image] space text2
space space space text3 space space space text3
space space space text1 space space space text1
space [image] space text2 space [image] space text2
space space space text3 space space space text3
Each image has a maximum of 100x100 pixels. 每个图像的最大像素为100x100。 They are different sizes.
它们是不同的大小。 If the image is less than 100 by 100 it should align vertically and horizontally as shown above.
如果图像小于100 x 100,则应按上图所示垂直和水平对齐。
The issues: 问题:
It looks like this: 看起来像这样:
space space space space space space
[image] space space [image] space space
space space space space space space
text1 text1
text2 text2
text3 text3
space space space space space space
[image] space space [image] space space
space space space space space space
text1 text1
text2 text2
text3 text3
The total width where these image and text falls in is 530 pixels so there is plenty of room. 这些图像和文字的总宽度为530像素,因此有足够的空间。 The code is as follows.
代码如下。
For those who don't know Coldfusion, the CFQUERY is simply a loop for the number of items returned from a database query: 对于不了解Coldfusion的用户,CFQUERY只是一个循环,用于循环从数据库查询返回的项目数:
.hcr ul { padding: 8px 5px; margin: 0; } .hcr li { margin: 0; padding: 0; float: left; width: 240px; padding: 10px; overflow: hidden; zoom: 1 } .hcr .wrap { width: 100px; height: 100px; display: table-cell; vertical-align: middle; text-align: center; border: 1px solid #ddd } .hcr .image { width: auto; height: auto; max-width: 100px; max-height: 100px; vertical-align: middle; } .hcr img { float: left; display: inline; margin-right: 10px }
<div class="hcr"> <ul> <cfoutput query="querylist"> <li> <span class="wrap"> <a href="some.html"><img src="#image#" class="image"></a> </span> <a href="some.html">#text1#</a> <div>#text2#</div> <div>#text3#</div> </li> </cfoutput> </ul> </div>
Any help is greatly appreciated. 任何帮助是极大的赞赏。 Thank you.
谢谢。
EDITED: 编辑:
I resolved one of the issues for the text by wrapping the text portion with: 我通过用以下文字包裹了文字部分,解决了文字问题之一:
.hcr .wrap2 {
width: 100px;
height: 100px;
display: table-cell;
}
<div class="hcr">
<ul>
<cfoutput query="querylist">
<li>
<span class="wrap">
<a href="some.html"><img src="#image#" class="image"></a>
</span>
<span class="wrap2">
<a href="some.html">#text1#</a>
<div>#text2#</div>
<div>#text3#</div>
</span>
</li>
</cfoutput>
</ul>
</div>
The image still will not center horizontally. 图像仍然不会水平居中。
Considering that CSS float and table properties were not designed for building layouts, your code is overly complicated. 考虑到CSS float和table属性不是为构建布局而设计的,因此您的代码过于复杂。 Not that it's not possible, or even traditional and popular, it's just not the most simple or efficient way to accomplish the task.
并非不可能,甚至不是传统的和流行的,这也不是完成任务的最简单或最有效的方法。
If you're open to a more modern technique, building your layout will be simpler and easier. 如果您愿意接受更现代的技术,则布局的构建将变得越来越简单。 In particular, CSS3's Flexbox can be useful in this case.
特别是在这种情况下,CSS3的Flexbox很有用。
.hcr li { display: flex; /* 1 */ width: 240px; padding: 5px; border: 1px dashed black; } .wrap1 { align-self: center; /* 2 */ width: 100px; height: 100px; border: 1px solid #ddd; } .wrap2 { flex: 1; /* 3 */ display: flex; /* 4 */ flex-direction: column; /* 5 */ justify-content: space-around; /* 6 */ align-items: center; /* 7 */ border: 1px dashed red; } .hcr .image { width: auto; height: auto; max-width: 100px; max-height: 100px; }
<div class="hcr"> <ul> <cfoutput query="querylist"> <li> <div class="wrap1"> <a href="some.html"> <img src="http://lorempixel.com/100/100/" class="image"> </a> </div> <div class="wrap2"><!-- new container --> <a href="some.html">#text1#</a> <div>#text2#</div> <div>#text3#</div> </div> </li> </cfoutput> </ul> </div>
Notes: 笔记:
Browser support: 浏览器支持:
Flexbox is supported by all major browsers, except IE 8 & 9 . 除了IE 8和9之外 ,所有主要的浏览器都支持Flexbox。
Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes . 某些最新的浏览器版本(例如Safari 8和IE10)需要供应商前缀 。
For a quick way to add all the prefixes you need, use Autoprefixer . 要快速添加所需的所有前缀,请使用Autoprefixer 。
More details in this answer . 此答案中有更多详细信息。
As in my edit, by wrapping the text portion with the following resolve one of the issues of text not moving to the right: 就像在我的编辑中一样,通过使用以下文字包装文本部分,可以解决文本不移到右侧的问题之一:
.hcr .wrap2 {
width: 100px;
height: 100px;
display: table-cell;
}
<div class="hcr">
<ul>
<cfoutput query="querylist">
<li>
<span class="wrap">
<a href="some.html"><img src="#image#" class="image"></a>
</span>
<span class="wrap2">
<a href="some.html">#text1#</a>
<div>#text2#</div>
<div>#text3#</div>
</span>
</li>
</cfoutput>
</ul>
</div>
The second issue is resolved by removing the line float: left;
通过删除行
float: left;
解决第二个问题float: left;
from img 来自img
.hcr img {
display: inline;
margin-right: 10px
}
You can see it on fiddle It's not fully centered because of the 10px margin on the right for spacing between the image and the text. 您可以在小提琴上看到它。由于右侧在图像和文本之间有10px的空白,因此它没有完全居中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.