CODEWITHSUNDEEP
csshtmlfigure
Fale1994
Fale1994

Reputation: 77

How to display figure elements inline in div

I want to display figure elements (that has images) inline in a div element, but it should be max 3 images in a row, horizontally centered.

Like this:

|X_X_X|
|X_X_X|
|_X_X_|

This is a CodePen example:

Snippet

#out {
  width: 210px;
  height: auto;
  display: inline-block;
  margin: 0 auto;
}
.pic {
  width: 70px;
}
.fig-pic {
  position: relative;
  width: 70px;
}
<div id="out">
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
</div>

Upvotes: 0

Views: 1130

Answers (3)

Vucko
Vucko

Reputation: 20834

Put inline-block to the .fig-pic so you can use text-align on them:

#out{
  width: 210px;
  text-align: center;
}

.fig-pic{
  width: 70px;
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

img{
  width: 100%;
}
<div id="out">
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure><!--
  --><figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure><!--
  --><figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure><!--
--><figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure><!--
--><figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
</div>

However, watch out for the inline-block whitespace.

Also, remove the figure default margins.

JSFiddle

Upvotes: 2

Goombah
Goombah

Reputation: 2855

Using your own example;

Your fig-pic div's need 

.fig-pic
{
  inline-block
  margin:0;
}

to align alongside eachtoher. Since there's always a little room between inline-block elements, you should eliminate that space by setting 

#out
{
  font-size:0 
}

or make your #out div a little wider. To center use:

#out
{
  text-align: center;
}

Codepen

Upvotes: 1

dippas
dippas

Reputation: 60563

you can use inline-block and width:33.3% for figure, this way you will have 3 images per row and it will be responsive. Using text-align:center in the parent container will center the content whenever the content isn't enough to fit the whole width parent, such as your last row.

* {
  box-sizing: border-box /* apply box model ta all elements */
}
body {
  margin: 0; /* reset default margin for body */
}
#out {
  width: 100%;
  font-size: 0; /* fix inline-block gap */
  text-align: center; /* align content to center */
}
figure {
  display: inline-block;
  width: 33.3%; /* make images to fit 3 per row */
  padding: 5%; /* demo */
  margin: 0 /* reset default margin for figure */
}
img {
  max-width: 100% /* width won't have more than 100% of parent width */
}
<div id="out">
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
  <figure class="fig-pic">
    <img class="pic" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYTf4zHVj4z_iuCqfmvaQQd-F2w1szPbM3w618ty1UyYdoIkdKcg">
  </figure>
</div>

Upvotes: 1

Related Questions