Aligning images inside Panel Bootstrap

Navigation
1

I have the following Panel : 

<div class="panel panel-primary">

        <div class="panel-heading">
            <h3 class="panel-title">Header</h3>
        </div>

        <div class="panel-body">

            <div class="panel-info">
                <div class="panel-heading">Qual seu gênero ?</div>
                <div class="panel-body" style="background-color:red; text-align:center">
                    <img src="../Icons/man.png" title="Homem" style="cursor:pointer"/>
                    <img src="../Icons/woman.png" title="Mulher" style="cursor:pointer"/>
                </div>
            </div>
        </div>
    </div>

The above code mounts Panel as follows:

I would like to align the two images in the center of the screen. In my CSS file I did this: 

.panel {
    text-align:center;
}

img {
  text-align:center;
}

The alignment worked only for the .panel class, and the .img class did not have the same result. How do I align the images too?

    
asked by anonymous 21.06.2017 / 03:37

1 answer

1

Try to directly call the class "panel-body" responsible for the images in your CSS, for example: 

.panel-body {
    text-align:center;
    background-color:red;
}

After improving your CSS code, be sure to replace: 

<div class="panel-body" style="background-color:red; text-align:center">

By: 

<div class="panel-body">

This should solve your problem. :)

    
21.06.2017 / 08:17
Counts nodes in binary trees Count values if values in two columns of the same row are specified