Aligning images within Bootstrap Panel

Question

I got 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 code above mounts the Panel thus :

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

.panel {
    text-align:center;
}

img {
  text-align:center;
}

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

Answer 1

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

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

After improving your CSS code, don’t forget to replace it:

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

For:

<div class="panel-body">

That should solve your problem. :)