平板电脑和智能手机的引导程序图像居中

Question

我目前正在构建一个带有引导程序的网站，在该网站上，我在每个部分中组合一个图像和一个文本块，每次都向左/向右切换。它看起来是这样的，我对图像使用了左拉和右拉，使它们在外部边界上与下面的文本对齐：

<div class="container-fluid standard-element">
  <div class="row">
    <div class="col-xs-6 col-md-6"><img src="./img/Placeholder_wideIcon.svg" class="img-responsive pull-left" alt="Responsive image"></div>
    <div class="col-xs-12 col-md-6">
      <h2>Headline</h2>
      <p>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
    </div>
  </div>
</div>
<div class="container-fluid standard-element">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <h2>#Agile</h2>
      <p>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
    </div>
    <div class="col-xs-6 col-md-6"><img src="./img/Placeholder_wideIcon.svg" class="img-responsive pull-right" alt="Responsive image"></div>
  </div>
</div>

现在的问题是，当图像堆叠在文本块上时，一旦到达平板电脑纵向断点，它们总是左对齐。当图像在文本旁边较长但在文本上方/下方堆叠时，我如何将图像居中？

提前感谢，Tim

Answer 1

您需要使用媒体查询来定位所需的切入点，例如768px。然后添加这样的东西（在这种情况下，我为iPad剪切）

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    .pull-left, .pull-right{margin:0 auto /* change the 0 to your liking */; display:block; float: none}
}

---

编辑：虽然以上内容在某些情况下可能对您有用，但我注意到您的问题是HTML标记，并且可以很容易地解决（加上几行CSS）。

HTML:

<div class="container-fluid header">
    <div class="col-xs-12 col-md-12">
        <img src="http://herbigt.com/doyouevenproduct/img/Placeholder_HeaderIcon.svg" class="img-responsive center-block header-image" alt="Responsive image" />
    </div>
    <div class="row">
         <h1>Lorem Ipsum</h1>
        <p class="lead">Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam.
            <br />Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </div>
</div>
<div class="container-fluid standard-element">
    <div class="row">
        <div class="col-xs-12 col-md-6 imagebox">
            <img style="border:1px solid red" src="http://herbigt.com/doyouevenproduct/img/Placeholder_wideIcon.svg" class="img-responsive " alt="Responsive image" />
        </div>
        <div class="col-xs-12 col-md-6">
             <h2>Headline</h2>
            <p>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
        </div>
    </div>
</div>
<div class="container-fluid standard-element">
    <div class="row">
        <div class="col-xs-12 col-md-6">
             <h2>#Agile</h2>
            <p>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
        </div>
        <div class="col-xs-12 col-md-6 imagebox">
            <img style="border:1px solid red" src="http://herbigt.com/doyouevenproduct/img/Placeholder_wideIcon.svg" class="img-responsive " alt="Responsive image" />
        </div>
    </div>
</div>

CSS:

/*Elements*/
 .header {
    background-color: #95d1c4;
    text-align: center;
    padding: 2.5em;
}
.header-image {
    padding: 0.5em;
}
.lead {
    padding-top: 1.0em;
    font-size: 2.8rem;
}
.standard-element {
    margin-top: 5.0em;
    margin-bottom: 5.0em;
    margin-left: 3.0em;
    margin-right: 3.0em;
    padding-bottom: 5.0em;
    border-bottom: 2px solid;
    border-color: #EEEEEE;
}
.img-section {
    border: 1px solid red;
}
.last-element {
    border-bottom: none;
}
.footer {
    background-color: #95d1c4;
    color: #ffffff;
    text-align: center;
    padding: 1.5em;
}
/*Typography*/
 h1, h2, h3, h4, h5, h6 {
    font-family:'Source Sans Pro', sans-serif;
    color: #E85C41;
}
h1 {
    font-size: 4.8rem;
    font-weight: 900;
}
h2 {
    font-size: 3.8rem;
    line-height: 7.0rem;
    font-weight: 700;
}
p {
    font-family:"chaparral-pro", serif;
    font-size: 2.0rem;
    font-weight: light;
    color: #464646;
}
a, a:visited {
    font-family:"chaparral-pro", serif;
    text-decoration: underline;
    font-size: 2.0rem;
    font-weight: light;
    color: #464646;
}
a:hover {
    font-family:"chaparral-pro", serif;
    text-decoration: none;
    font-size: 2.0rem;
    font-weight: light;
    color: #464646;
}
ul {
    font-family:"chaparral-pro", serif;
    font-size: 2.0rem;
    font-weight: light;
    line-height: color: #464646;
    text-indent: none;
}
.imagebox {
    text-align:center
}
.imagebox img {
    margin:0 auto
}
/* Media Queries */
/* Tablet Portrait*/
 @media (max-width: 768px) and (min-width: 481px) {
    .pull-left, .pull-right {
        margin:0 auto;
        display:block;
        float: none !important;
    }
    .standard-element {
        border: 1px solid red;
    }
}
/* Mobile */
 @media (max-width: 480px) and (min-width: 0px) {
    .pull-left, .pull-right {
        margin:0 auto;
        display:block;
        float: none !important;
    }
    .standard-element {
        margin-left: 0em;
        margin-right: 0em;
        border: 1px solid red;
    }
    h2 {
        line-height: 3.5rem;
    }
}

解释：我们删除了pull-left和right类，只使用默认的Bootstrap列行为。然后我们简单地添加一个.imagebox类，这样我们就可以针对它并将图像居中。就这么简单。

---

注意：虽然看起来很小，但我注意到您没有关闭某些标签。至少，您的页面永远不会进行验证（以防这对您来说是个问题），所以请记住以XHTML的方式使用标记，这样，如果您在验证中没有遇到真正不存在的错误。图像应该是这样的：<img src="your_image.jpg" alt="" />和BREAK是这样的<br/>（注意后面的斜杠）。