使用CSS媒体查询垂直对齐图像

时间：2015-11-10 21:35:08

标签： html css media-queries

我在这里看过其他例子，但似乎有效。我有一小部分文字，一张图片在蓝色div内对齐。随着页面变得越来越窄，文本在div中正确缩小，但图像仍保留在div的左上角。我希望它留在div的垂直中心。它可以变大或保持相同的大小，我只需要它移动到中心。

JSfiddle 

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

3 个答案:

答案 0 :(得分：0)

从float元素和.icon以及margin-left: auto中删除margin-right: auto。将以下代码放在您希望看到此行为的断点中。

.icon {
    float: none !important;
    margin: 0 auto;
}

您的@media个查询存在一些问题，因此我已在此example中对其进行了编辑。

body,h4 {
	font-family:Gotham,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:13px;
	color:#333;
}

* {
	padding:0;
}

.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 screen and (max-width: 480px) {
    .icon {
        float: none !important;
        margin: 0 auto;
    
}
<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">
                <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/>
</body>

答案 1 :(得分：0)

我想这就是你要找的东西：

您必须为display:inline-table和.icon课程指定.warning。另外，因为你有图像所以你不能直接应用vertically-align:middle;，如果你把它包裹在div / span附近会更好。

Working : Fiddle 

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>

答案 2 :(得分：0)

在指定的断点处使用媒体查询时，您通常可以安全地使用父级display: table和子级display: table-cell; vertical-align: middle;，以便垂直对齐其内容。

在下面的代码段中，我删除了大部分HTML，以便更好地概述CSS实际应用的元素。这应该有助于其他碰巧在这个问题上落地的人。另外，我替换了img标签，因为在这种情况下箭头不是语义内容，它使得样式更容易。

＆＃13;
＆＃13; 
body { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* ------------------ Start Important Part ------------------ */

.warning {
    display: table; /* Set container as table */
    width: 100%;
    background-color: #D4DDF7;
}
.warning > * {
    display: table-cell; /* Set children as table-cell */
    padding: 15px;
    vertical-align: middle; /* Vertically center children */
}

/* ------------------- End Important Part ------------------- */

/* Icon */
.warning > .icon { width: 50px; }
.warning > .icon::after {
    content: "";
    display: inline-block;
    background: url("https://placeimg.com/50/50/arch/grayscale");
    width: 50px;
    height: 50px;
}

/* Warning text */
.warning > p {
    line-height: 1.5em;
    font-size: 16px;
    color: #0c203d;
    font-weight: bold;
}
＆＃13; 
<div class="warning">
    <span class="icon"></span>
    <p>THIS VIEW DOES NOT CONTAIN STORM RELATED EMERGENCY ROAD CONDITIONS.</p>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题