Center the contents of a div without aligning the text Bootstrap

Navigation
2

Good afternoon, the problem I have is the following in this column I would like to center the content of the div, but when using "text-center" the text gets centered too, I would like the "p" label to be centered but not align the alignment of the text it has (that is, keep aligned to the left) 

<div class='col-xs-12 col-sh-4 col-md-4 col-lg-4'>
        <h6 class='text-center'>CONTACTO</h6>
        <span class='fui-mail'></span>
        <a href"mailto:[email protected]">[email protected]</a><br /><br />
        <span class='fui-chat'></span>
        <p id='contacto'>
          <strong class='colored'>Linea Gratuita:</strong> 0500UBA00<br />
          <strong class='colored'>Telefono:</strong> +58 243-265.02.07 / 265.01.97
        </p>
</div>

CSS Code: 

footer .colored{
    text-decoration: underline;
}
    
asked by lHumanizado 14.02.2017 в 21:41
source

2 answers

5

The HTML element P , occupies the entire horizontal space, so you would have to change it to use only the space it requires with the display: inline-block style. Then place the text-center class at the level of the column, and the text-left class for the elements whose content should be aligned to the left.

Example: 

#contacto {
  display: inline-block;
}
<!-- Latest compiled and minified CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
<div class='col-xs-12 col-sh-4 col-md-4 col-lg-4 text-center'>
    <h6 class=''>CONTACTO</h6>
    <span class='fui-mail'></span>
    <a href"mailto:[email protected]">[email protected]</a><br /><br />
    <span class='fui-chat'></span>
    <p id='contacto' class="text-left" >
      <strong class='colored'>Linea Gratuita:</strong> 0500UBA00<br />
      <strong class='colored'>Telefono:</strong> +58 243-265.02.07 / 265.01.97
    </p>      
</div>
</div>
    
answered by 14.02.2017 / 21:57
source
0

Narrowing @Javier's response, you can use it to center it text-align:center; 

#contacto {
  text-align:center;
}
<!-- Latest compiled and minified CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
<div class='col-xs-12 col-sh-4 col-md-4 col-lg-4 text-center'>
    <h6 class=''>CONTACTO</h6>
    <span class='fui-mail'></span>
    <a href"mailto:[email protected]">[email protected]</a><br /><br />
    <span class='fui-chat'></span>
    <p id='contacto' class="text-left" >
      <strong class='colored'>Linea Gratuita:</strong> 0500UBA00<br />
      <strong class='colored'>Telefono:</strong> +58 243-265.02.07 / 265.01.97
    </p>      
</div>
</div>
    
answered by 14.02.2017 в 22:30
How to know which div was clicked without static id? How do the #endif #if #ifdef statements work?