我在这里查看了其他示例，但似乎可行。我有少量文字和图片在蓝色div内对齐。随着页面变窄，div中的文本大小会适当缩小，但图像仍保留在div的左上方。我希望它保持在div的垂直中心。它可以变大或保持不变，我只需要将它移到中心即可。
body, h4 {
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:13px;
color:#333333;
}
* {
padding:0px;
}
.warning {
line-height:1.5em;
font-size:16px;
color:#0c203d;
padding-left:60px;
}
.blueBox {
background-color:#D4DDF7;
min-height:50px;
max-height:150px;
padding:0;
text-align: left;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.icon {
padding:0;
display:table-cell;
vertical-align: middle;
float:left;
}
@media only screen and (min-width : 735px) and (max-width:1400px) {
.warning {
font-size:16px;
padding-top:14px;
}
@media only screen and (min-width : 321px) and (max-width:734px) {
.warning {
font-size:13px;
padding-top:1px;
}
}
@media only screen and (min-width : 200px) and (max-width:320px) {
.warning {
font-size:12px;
padding-top:1px;
}
}<div>
<div id="ctl00_ContentPlaceHolder1_countyText">
<p class="text">To find road conditions use the County selection box or simply click on a County on the searchable map. To view ALL Counties at once, Choose ALL COUNTIES from the dropdown, and click Go.
<br />Map is not visible on small screens.</p>
<div class="blueBox">
<img class="icon" src="https://placeimg.com/50/50/arch/grayscale" alt="Arrow Icon" width="50px" height="50px" />
<h4 class="warning">THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</h4>
</div>
<!-- End blueBox -->
<p>To view our progress on STORM Related closings, Visit our <a href="http://dbw.scdot.org/RoadConditions2/default.aspx" class="textLink">Work Plan and Current Closures</a> site.</p>
<p><span id="ctl00_ContentPlaceHolder1_lblMessageCty" class="bText rText">See Results Below</span>
</p>
</div>
</div>
<br/>
<br/>我想这就是您要寻找的东西：
您必须指定display:inline-table您的.icon和.warning班级。另外，由于您具有图片，因此请勿直接应用vertically-align:middle;，如果将其包裹在div / span上，效果更好。
body,
h4 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
color: #333333;
}
* {
padding: 0px;
}
.warning {
display: table-cell;
font-size: 16px;
color: #0c203d;
padding-left: 60px;
vertical-align: middle;
}
.blueBox {
background-color: #D4DDF7;
min-height: 50px;
max-height: 150px;
padding: 0;
text-align: left;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
display: table;
}
.icon {
display: table-cell;
vertical-align: middle;
}
@media only screen and (min-width: 735px) and (max-width: 1400px) {
.warning {
font-size: 16px;
}
@media only screen and (min-width: 321px) and (max-width: 734px) {
.warning {
font-size: 13px;
}
}
@media only screen and (min-width: 200px) and (max-width: 320px) {
.warning {
font-size: 12px;
}
}<body>
<div>
<div id="ctl00_ContentPlaceHolder1_countyText">
<p class="text">To find road conditions use the County selection box or simply click on a County on the searchable map. To view ALL Counties at once, Choose ALL COUNTIES from the dropdown, and click Go.
<br />Map is not visible on small screens.</p>
<div class="blueBox"> <span class="icon"><img src="https://placeimg.com/50/50/arch/grayscale" alt="Arrow Icon" width="50px" height="50px" /></span>
<h4 class="warning">THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</h4>
</div>
<!-- End blueBox -->
<p>To view our progress on STORM Related closings, Visit our <a href="http://dbw.scdot.org/RoadConditions2/default.aspx" class="textLink">Work Plan and Current Closures</a> site.</p>
<p><span id="ctl00_ContentPlaceHolder1_lblMessageCty" class="bText rText">See Results Below</span>
</p>
</div>
</div>
<br/>
<br/>
</body>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句