Html 如何垂直放置图像和两行文本，并在它们不适合同一行时将其包装（在移动设备中时）
我正在创建一个小网站，我希望它的设计也保持在平板电脑/手机版本。这就是我所拥有的： 这就是我想要的：Html 如何垂直放置图像和两行文本，并在它们不适合同一行时将其包装（在移动设备中时）,html,css,materialize,Html,Css,Materialize,我正在创建一个小网站，我希望它的设计也保持在平板电脑/手机版本。这就是我所拥有的： 这就是我想要的： 以页面中部为中心： 当我调整窗口大小时，图像和文本也要调整大小，并且当它们不能放在同一行上时，它们会变成这样： 我设法做了一些类似的事情，但当我调整窗口大小时，图像和文本一个接一个地移动，然后文本移动到第二行 代码： 这是一个例子，图像和文本在同一行 在JSFIDLE上测试的最终代码： @仅介质屏幕，最大宽度：780px{ ：无{ 文本对齐：居中； } 主体。s12{ 位置：相对位置； 显
以页面中部为中心：
当我调整窗口大小时，图像和文本也要调整大小，并且当它们不能放在同一行上时，它们会变成这样： 我设法做了一些类似的事情，但当我调整窗口大小时，图像和文本一个接一个地移动，然后文本移动到第二行 代码： 这是一个例子，图像和文本在同一行在JSFIDLE上测试的最终代码：
@仅介质屏幕，最大宽度：780px{ ：无{ 文本对齐：居中； } 主体。s12{ 位置：相对位置； 显示：内联块； 垂直对齐：顶部； 字体大小：25px； 利润率最高：0%； 文本对齐：左对齐； } 第一组{ 利润率最高：20%； } } ：无{ 文本对齐：居中； } .s12{ 位置：相对位置； 显示：内联块； 垂直对齐：顶部； 文本对齐：左对齐； 利润率最高：20%； } 这是一个图像示例，文本在同一行上
嗯，文本的两行应该对齐。在你的解决方案中，一个居中，另一个偏左。偏左一点？还是可以看看吗？@仅媒体屏幕和最大宽度：780px弄乱了我导航栏的子级别，有什么解决方法吗？非常感谢。不使用引导就可以吗？我已经加载了materialize，它们可能会冲突。对不起，我没有使用materialize。我成功地包含了引导，问题是在图像下面加上文本，我得到了很多空白，相当于5，我如何删除它？因此，在图像和文本以及我放在HTML中的另一个元素之间有很大的空间。在这个例子中，有display:table和display:table单元格，用于垂直中间对齐。也许你需要删除这个样式？我不太明白你的意思。还有身高：100%；尽量减少这个过程。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 col-lg-12" style="display: table;position: absolute;height: 100%;width: 100%;">
<div style="display: table-cell;vertical-align: middle;">
<img style="display: inline-block" src = "http://lh3.googleusercontent.com/jN9tX6dCJ6_XL9E4K1KCO2Tuwe9_rYUbwv723eu6XGI0PWGLcPs0259VscOu249PPKKcU5AOXrq6JnleEaoK6K_JvZ2PY9lw3pMApzOpTQ=s660" width="50%"/>
<h4 class="text" style="width: 45%;display: inline-block;word-wrap:break-word;"> This is an example of, image and text on the same line </h4>
</div>
</div>
</div>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
</div>
</body>
</html>
<style>
@media (max-width: 600px) {
.text {
font-size: 14px;
}
}
.text {
vertical-align: middle;
}
</style>