Apprentice Apprentice - 19 days ago 5
CSS Question

How to centralize the block that uses p and span

I want to centralize the following block in small devices(col-sm-12). I tried using text-align:center, margin: 0 auto but no success. The image and text does not align while centralizing for small devices

My list looks like this when using text-align: center.

enter image description here

This is my code

<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 is className in reactjs.

Answer

As was suggested you should use ul or ol for lists. Taking that into consideration I updated your code to make it look centered with an image as a bullet

The tricky thing is the width on .encontrar ul, I don't know what screen size you are working with, so adjust that width accordingly

Please note, for the example I changed className to 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/