时间戳

首页 > 解决方案 > 将图像与文本块对齐

html - 将图像与文本块对齐

问题描述

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css" rel="stylesheet"/>


<div class="center" style="margin: auto;">
	<img src="./Resources/document.png" style="vertical-align: middle;" />
	<p style="display: inline-block">Never lose an email again</p>
	<p style="font-size: 0.8em">Second paragrah the wants to have indentation</p>
</div>

我想要的结果是例子

请注意，图像与第一个文本块垂直对齐，第二个文本块具有正确的缩进。我想用带有灵活填充的容器来包含整个元素，比如width:50%

目前我的代码是

<div class="center" style="margin: auto;"> <img src="./Resources/document.png" style="vertical-align: middle;" /> <p style="display: inline-block">Never lose an email again</p> </div>

但是，第二个文本块没有正确缩进。

标签： htmlcss

解决方案

我建议您使用FontAwesome图标或类似的东西而不是使用图像来实现最终结果。

更新的片段复制了您附加的屏幕截图 -

.small {
  font-size: 0.8em;
  margin-top: 20px;
}

.box {
  width: 30%;
  margin-left: 35%;
  margin-right: 35%;
  margin-top: 30px;
}

.box:before {
  font-family: FontAwesome;
  color: green;
  font-size: 25px;
  position: absolute;
  margin-left: -33px;
  margin-top: -5px;
}

.magnify:before {
  content: "\f002";
}

.book:before {
  content: "\f02d";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="box magnify">
  <p>Never lose an email again</p>
  <p class="small">Second paragrah the wants to have indentation Second paragrah the wants to have indentation Second paragrah the wants to have indentation</p>
</div>

<div class="box book">
  <p>Never lose an email again</p>
  <p class="small">Second paragrah the wants to have indentation Second paragrah the wants to have indentation Second paragrah the wants to have indentation</p>
</div>

推荐阅读