Question

我正在尝试将列表背景对称的图像集中居中。不论浏览器的大小。我可以通过哪些方式对称地对齐内容

我尝试在列表和画廊周围设置包装纸，并设置固定宽度，但它只会更改我的图像尺寸，而不会更改列表背景尺寸。我还尝试过使用浮动控件，但是它会在所有周围发生变化。

.months {
  display: inline-block;
  text-align: justify;
  color: #808080;
  width: 44.4%;
  margin-top: 25px;
}

.months ul {
  list-style-type: none;
}

.months li {
  background-color: #ffffff;
  padding: 16px;
  border-bottom: 1px solid #808080;
}


.tourCities {
  display: inline-block;
  width: 260px;
  margin: 15px;
  background-color: #ffffff;
}

.tourCities img {
  width: 100%;
  height: auto;
}

http://jsfiddle.net/xza7g439/

为了让所有内容保持整洁，我添加了一个jsfiddle代码。

https://imgur.com/a/PnIzxnp这就是我想要实现的目标 https://imgur.com/a/dDt27UE但这是我得到的，而且看起来不正确会伤害我的强迫症。

Answer 1

您可以这样做：

CSS

body {
  background-color: #000;
  box-sizing: border-box;
}

.wrapper{
  display: inline-block;
  width: 500px; //Set the size here what you want (px, %)
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}


.months {
  display: inline-block;
  text-align: justify;
  color: #808080;
  width: 100%;
  margin-top: 25px;
}

.months ul {
  list-style-type: none;
  margin:0;
  padding:0;
}

.months li {
  background-color: #ffffff;
  padding: 16px;
  border-bottom: 1px solid #808080;
}


.tourCities {
  display: inline-block;
  width: calc(50% - 8px);
  background-color: #ffffff;
  vertical-align: middle;
  float: left;
  margin: 16px 0px;
}




 .cities .tourCities:nth-child(2n+0) {
  margin-right:0;
  margin-left: 16px; //pixel perfection
}

.tourCities img {
  width: 100%;
  height: auto;
}

.desc {
  text-align: justify;
  padding: 5px;
}

.date{
  font-weight: 100;
  color: #808080;
}

.smlBtn {
  color: #ffffff;
  background-color: #000000;
  border-style: none;
  padding: 14px;
}

HTML

<div class="wrapper">

  <div class="months">
          <ul>
            <li>September</li>
            <li>October</li>
            <li>November</li>
          </ul>

        </div>
        <div class="cities">
          <div class="tourCities">
            <img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="New york" width="245" height="184">
            <div class="desc">
              <p>
                <b>New York</b>
              </p>
              <p class="date">Fri 27 Nov 2019</p>
              <p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
              <button class="smlBtn">Buy Tickets</button>

            </div>
          </div>
          <div class="tourCities">
            <img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="Paris" width="245" height="184">
            <div class="desc">
              <p>
                <b>Paris</b>
              </p>
              <p class="date">Sat 28 Nov 2019</p>
              <p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
              <button class="smlBtn">Buy Tickets</button>
            </div>
          </div>
          <div class="tourCities">
            <img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="San Francisco" width="245" height="184">
            <div class="desc">
              <p>
                <b>San Francisco</b>
              </p>
              <p class="date">Sun 29 Nov 2019</p>
              <p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
              <button class="smlBtn">Buy Tickets</button>
            </div>
          </div>

      </div>
 </div>

DEMO HERE

将内容与页面其余部分对称对齐

1 个答案: