把图像和文字放在不同的高度html / css？ [英] Put images and text in different heights html/css?
问题描述
您好，
我已经完成了我的html / css课程，但我很难制作一个我想要的图片和文字未设置对齐但位于不同高度的菜单。我链接一个图片让你明白我想要的东西。
http：// i64 .tinypic.com / 1zvv8l4.jpg [ ^ ]
我在stackoverflow中读到，如果我希望这个菜单有响应，我不应该使用位置属性。
谢谢。
Hello,
I have finished my html/css lessons but I m having hard time making a menu I want with images and text that are not set aligned but in different heights .I m linking an image to make you understand what I want.
http://i64.tinypic.com/1zvv8l4.jpg[^]
I read in stackoverflow that I should not use position properties if I want this menu to be responsive.
Thank you .
推荐答案
这里有一个提示：如果你看起来不错，你会看到一个包含5列2行的表，剩下3个单元格空的。
对于实现，您可以使用具有适当CSS样式的3行div元素，特别是属性display值为table-row和table-cell：
https://developer.mozilla.org/en-US/docs/Web/CSS/display [ ^ ]。
以下是您的概念证明：
Here is a hint for you: if you look properly, you will see a table of 5 columns and 2 rows, with 3 cells left empty.
For implementation, you can use 3 rows of div elements with appropriate CSS styles, in particular, the propertydisplaywith values "table-row" and "table-cell":
https://developer.mozilla.org/en-US/docs/Web/CSS/display[^].
Here is a proof of concept for you:
<html>
<head>
<title>Table layout</title>
<style>
div { padding-left: 1em; padding-right: 1em;
padding-top: 0.4em; padding-bottom: 0.4em; }
div.menu { display: table; }
div.row { display: table-row; }
div.cell { display: table-cell;
vertical-align:middle; text-align: center;
border: solid black thin; }
</style>
</head>
<body>
<div class="menu">
<div class="row">
<div class="cell">Image 1</div>
<div class="cell"></div>
<div class="cell">Text 1</div>
<div class="cell"></div>
<div class="cell">Image 2</div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell">Image 3</div>
<div class="cell">Text 2<br/>
more text<br/>more…</div>
<div class="cell">Image 4</div>
<div class="cell"></div>
</div>
</div>
</body>
</html>
要获得最终结果，请删除边界;我添加它们只是为了演示。请注意 vertical-align 以及内容在垂直和水平方向上自行调整的事实，具体取决于所有单元格内部内容的大小。
For final results, remove the borders; I added them just for demonstration. Pay attention for vertical-align and the fact that the content adjusts itself in both vertical and horizontal direction, depending on the size of the inner content of all cells.
这篇关于把图像和文字放在不同的高度html / css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http：// i64 .tinypic.com / 1zvv8l4.jpg](\"http://i64.tinypic.com/1zvv8l4.jpg\"){kind=link}