CODEWITHSUNDEEP
csscenter
Peri Hartman
Peri Hartman

Reputation: 19484

css center group of elements in square area

(Please see my working solution at the bottom of my post)

I have a fixed size box and, inside, I'd like to center a group of elements consisting of an img, h3, p.

If the box contains only the img, I can get it to center nicely. But when I add the text tags, the centering breaks.

Here's the html, css for the working case:

<div class=cell>
  <img src="paintings/Painting-40.small.jpg" onclick="clickCell('0')">
</div>

.cell {float:left; width:350px; height:350px; line-height:350px; display:block; z-index:0;}
.cell img {vertical-align:middle; border:3px solid #cecece;}

In the above, I use line-height to allow vertical-align to work. As I understand it, CSS only provides for vertical align of text, thus I make the text line the height of my box.

Now, for the broken case, which you can also view at https://jsfiddle.net/qhuqtspb/2/

<div class=cell>
  <div class=caption>
    <img src="http://kostal.kotatko.com/paintings/Painting-40.small.jpg" onclick="clickCell('0')">
    <h3>title</h3>
    <p>id:Painting-40</p>
  </div>
</div>

.cell {float:left; width:350px; height:350px; line-height:350px; display:block; z-index:0; border:1px solid red}
.cell .caption {margin:auto; vertical-align:middle; border:1px solid green }
.cell .caption img {border:3px solid #cecece;}
.cell .caption h3 {line-height:10px; display:block}
.cell .caption p {line-height:10px; display:inline}

Even though I've added a middle layer, to encapsulate the three grouped elements (green border), it's still assigning a large line-height to each element, causing them to overflow the box (red border). Also note that the horizontal centering is broken.

I've tried many variations of the markup but nothing works so far.

Working Solution:

* {padding: 0px; margin: 0px}

.cell {width: 350px; height: 350px; border: 1px solid red;
       display: flex; justify-content:center; align-items:center;
}
.cell img {border: 3px solid #cecece;}
.cell .group {text-align:center;}
.cell h3 {display:inline}
.cell p {display:inline}
<div class=cell>
  <div class=group>
    <img src="http://kostal.kotatko.com/paintings/Painting-40.small.jpg" onclick="clickCell('0')">
    <div>
      <h3>title</h3>
      <p>id:Painting-40</p>
    </div>
  </div>
</div>

Upvotes: 1

Views: 1867

Answers (3)

Will Hamic
Will Hamic

Reputation: 692

Another option is to use flex-box. It's a pretty useful CSS module for aligning, centering, and displaying elements. I've put the CSS to use this in the way you want to below. To make this readable I removed some elements from the CSS that didn't effect the snippet. Make sure to add anything necessary back before you continue working.

* {
  padding: 0px;
  margin: 0px
}

.cell {
  width: 350px;
  height: 500px;
  border: 1px solid red;
  
  display: flex;
  justify-content:center;
  align-items:center;
}

.cell .caption {
  border: 1px solid green;
  text-align:center;
}

.cell .caption img {
  border: 3px solid #cecece;
}
<div class=cell>
  <div class=caption>
    <img src="http://kostal.kotatko.com/paintings/Painting-40.small.jpg" onclick="clickCell('0')">
    <h3>title</h3>
    <p>id:Painting-40</p>
  </div>
</div>

Upvotes: 1

emil
emil

Reputation: 6364

Try this fiddle.

https://jsfiddle.net/qhuqtspb/4/

You can use flexbox to center it. Basically use this css on container.

.cell {
  display:flex;
  align-items: center;
  justify-content: center;
}

For more information about flexbox, here is complete guide. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Md Junaid Alam
Md Junaid Alam

Reputation: 1349

use display:table for cell and display:table-cell for caption

* {padding:0px; margin:0px}

.cell {float:left; width:350px; height:350px;  display:table; z-index:0; border:1px solid red;text-align:center;}
.cell .caption {margin:auto; vertical-align:middle; border:1px solid green;display:table-cell; }
.cell .caption img {border:3px solid #cecece;}
.cell .caption h3 {line-height:10px; display:block}
.cell .caption p {line-height:10px; display:inline}
<div class=cell>
  <div class=caption>
    <img src="http://kostal.kotatko.com/paintings/Painting-40.small.jpg" onclick="clickCell('0')">
    <h3>title</h3>
    <p>id:Painting-40</p>
  </div>
</div>

Upvotes: 0

Related Questions