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>

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

提前致谢，添

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

说明：我们正在删除左右类，只使用默认的Bootstrap列行为。然后我们只需添加一个.imagebox类，这样我们就可以定位它并使图像居中。就这么简单。

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

平板电脑和智能手机的中心引导图像

1 个答案: