将图像与文本块对齐

Question

<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>

但是第二个文本块不能正确缩进。

Answer 1

这是我的解决方法

我将图像的position制作为absolute，然后将padding-left添加到容器中，使其大于图像的宽度。 这样可以确保添加的文本具有适当的缩进。

这还可以使HTML结构更整洁，并防止嵌套div

.custom-class {
  position: relative;
  padding:5px;
  padding-left:50px;
}
.custom-class p{
  text-align:left;
  margin:0;
}


.custom-class img {
position: absolute;
top: 4px;
left: 4px;
}

<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 custom-class" style="margin: auto;">
  <img src="https://placehold.it/28x28" style="" />
  <p style="">Never lose an email again</p>
  <p style="font-size: 0.8em">Second paragrah the wants to have indentation</p>
</div>

Answer 2

我建议您使用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>

Answer 3

https://materializecss.com/helpers.html

您应该能够将您的img和段落用valign-wrapper类包装在div中。

<div class="center-align”>
    <div class="valign-wrapper">
        <img src="https://placehold.it/28x28" />
        <p style="">Never lose an email again</p>
    </div>
    <p style="font-size: 0.8em; margin-left: 28px;">Second paragrah the wants to have indentation</p>
</div>