html - 如何集中使用 p 和 span 的 block

Question

我想在小型设备 (col-sm-12) 中集中以下 block 。我尝试使用 text-align:center, margin: 0 auto 但没有成功。小型设备集中时图像和文本不对齐

当使用 text-align: center 时，我的列表看起来像这样。

这是我的代码

<div className="row">
  <div className="col-xs-12 col-sm-12 col-md-3 encontrar">
    <h4>Apartamento vacacional en:</h4>
    <p>
      <span><img src={icon} className="img-responsive" /></span>
      <span>Cádiz</span>
    </p>
  </div>
  <div className="col-xs-12 col-sm-12 col-md-3 encontrar">
    <h4>Qué hacer en:</h4>
    <p>
      <span><img src={icon} className="img-responsive" /> </span>
      <span>Madrid</span>
    </p>
  </div>
  <div className="col-xs-12 col-sm-12 col-md-3 encontrar">
    <h4>Casa rural en:</h4>
    <p>
      <span><img src={icon} className="img-responsive" /> </span>
      <span>Gijón</span>
    </p>
  </div>
  <div className="col-xs-12 col-sm-12 col-md-3 encontrar">
    <h4>Qué ver en:</h4>
    <p>
      <span><img src={icon} className="img-responsive" /> </span>
      <span>Sevilla</span>
    </p>
  </div>
</div>

class是reactjs中的className。

Answer 1

正如所建议的那样，您应该对列表使用 ul 或 ol。考虑到这一点，我更新了您的代码，使其看起来以图像为中心

棘手的是 .encontrar ul 上的宽度，我不知道你使用的是什么屏幕尺寸，所以相应地调整宽度

请注意，对于我将 className 更改为 class 的示例

HTML

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-3 encontrar">
    <h4>Apartamento vacacional en:</h4>
    <ul>
      <li>Cádiz</li>
      <li>Santander</li>
      <li>Benidorm</li>
    </ul>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-3 encontrar">
    <h4>Qué hacer en:</h4>
    <ul>
      <li>Madrid</li>
      <li>Paris</li>
    </ul>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-3 encontrar">
    <h4>Casa rural en:</h4>
    <ul>
    <li>Sevilla</li>
    </ul>
  </div>
</div>

CSS

.encontrar {
  text-align:center;
}

.encontrar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 10%;
  display: inline-block;
}

.encontrar ul li {
  position: relative;
  padding: 0 0 0 15px;
  text-align: left;
}

.encontrar ul li:before {
  content : '';
  width: 12px;
  height: 12px;
  position: absolute;
  left: 0;
  top: 3px;
  background: url(http://www.cadforum.cz/forum_en/forum_images/bullet.png) no-repeat;
}

https://jsfiddle.net/6tstwmnh/1/