Bulma

Question

我想要右边的文字和左边的图像，反之亦然，两者都垂直居中。

应该如下所示

图片

Answer 1

结构

<section>
  <div class="columns">
    <div class="column is-7">
      <!-- Image -->
    </div>
    <div class="column is-5">
      <!-- My hero -->
    </div>
  </div>
</section>
<section>
  <div class="columns">
    <div class="column is-5">
      <!-- My hero -->
    </div>
    <div class="column is-7">
      <!-- Image -->
    </div>
  </div>
</section>

总计

（根据需要更改CSS）

.myBg {
  background-color: #273238;
  color: white;
  border: 1px solid white;
}

.myHero .hr {
  display: inline-block;
  width: 100px;
  height: 15px;
  background: white;
  border-radius: 20px;
  margin-bottom: 15px;
}

.myHero h1 {
  font-size: 50px
}

.myHero.hero-right {
  padding-right: 100px;
  text-align: right;
}

.myHero.hero-left {
  padding-left: 100px;
}

@media(max-width: 768px) {
  .myHero {
    padding: 100px 50px !important;
    //text-align: left !important;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<section class="myBg">
  <div class="columns is-vcentered">
    <div class="column is-7">
      <figure class="image is-4by3">
        <img src="https://i.stack.imgur.com/WpMdM.png" alt="">
      </figure>
    </div>
    <div class="column is-5">
      <div class="myHero hero-right">
        <div class="hr"></div>
        <h1>BOOST</h1>
        <ul>
          <li>This is the cooles thing.</li>
          <li>I am gonna do in my entire life. Awesome!</li>
          <li>Achievements are good as heaven. I want it soon.</li>
        </ul>
      </div>
    </div>
  </div>
</section>
<section class="myBg">
  <div class="columns is-vcentered">
    <div class="column is-5">
      <div class="myHero hero-left">
        <div class="hr"></div>
        <h1>BOOST</h1>
        <ul>
          <li>This is the cooles thing.</li>
          <li>I am gonna do in my entire life. Awesome!</li>
          <li>Achievements are good as heaven. I want it soon.</li>
        </ul>
      </div>
    </div>
    <div class="column is-7">
      <figure class="image is-4by3">
        <img src="https://i.stack.imgur.com/WpMdM.png" alt="">
      </figure>
    </div>
  </div>
</section>

Bulma - 如何将图像和文本内联

Bulma - How to put image and text inline

html

css

总计