如何集中使用p和span的块

Question

我想在小型设备（col-sm-12）中集中以下块。我尝试使用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/