How do I move a headline(h2) below the figure and image with CSS?

How do I move a headline(h2) below the figure and image with CSS?

I'm practicing CSS and I stumbled across a minor problem. I have and article tag with a headline(h2) and a figure. I want to move the headline to be below the figure tag.

I tried to float the headline the right and that worked but the problem was I couldn't get it below the figure. When I obviously made the figure smaller so the headline would fit but I figured if I make it big enough in width it would push down the headline. Nope, the headline just spanned over, like it covered the figure.

article h2 {
	text-align: center;
	color: #405377;
	padding: 1em;
	clear:both;
    }

    article figure {
	background: #ebe3ff
    }

    article img {
	display: block;
	max-width: 25em;
	min-width: 5em;
	max-height: 13em;
	margin-left: auto;
	margin-right: auto;
    }
<h2>Headline</h2>
<figure>
 <img src=""alt="/>
 <figcaption>text</figcaption>
</figure>
<p>Text text</p>

If you use order: -1; on the item with display: flex; on the container, this will bring that item up to the top.

div {
  display: flex;
  flex-direction: column;
}

h2 {
  text-align: center;
  color: #F9F9FA;
  background: #a8a8ff;
  padding: 1em;
}
figure {
  background: #ebe3ff;
  order: -1;
}
img {
  display: block;
  max-width: 25em;
  min-width: 5em;
  max-height: 13em;
  margin: 0 auto;
}
<div>
<h2>Headline</h2>
<figure>
 <img src="#"/>
 <figcaption>text</figcaption>
</figure>
<p>Text text</p>
</div>

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.


Have you tried to simply move the <h2> below the image?

Like the following:

article h2 {
	text-align: center;
	color: #405377;
	padding: 1em;
	clear:both;
    }

    article figure {
	background: #ebe3ff
    }

    article img {
	display: block;
	max-width: 25em;
	min-width: 5em;
	max-height: 13em;
	margin-left: auto;
	margin-right: auto;
    }
<figure>
 <img src=""alt="/>
 <figcaption>text</figcaption>
</figure>
<h2>Headline</h2> <!-- moved the h2 below -->
<p>Text text</p>

The most common and (therefore) easiest type of centering is that of lines of text in a paragraph or in a heading. CSS has the property 'text-align' for that: P { text-align: center } H2 { text-align: center } renders each line in a P or in a H2 centered between its margins, like this:


The easiest way is a outer container with display flex

Here you can find more information about display:flex

Also you had a missing " at yout alt="" tag

.outer{
  display:flex;
  flex-direction:column-reverse;
}

article h2 {
	text-align: center;
	color: #405377;
	padding: 1em;
	clear:both;
    }

    article figure {
	background: #ebe3ff
    }

    article img {
	display: block;
	max-width: 25em;
	min-width: 5em;
	max-height: 13em;
	margin-left: auto;
	margin-right: auto;
    }
<div class="outer">
<h2>Headline</h2>
<figure>
 <img src=""alt=""/>
 <figcaption>text</figcaption>
</figure>
</div>
<p>Text text</p>

Well, actually we can do even more with CSS3 text-shadow property rather than just to create a shadow under text. You’ll get to know from the CSS tricks below. So let’s keep reading! CSS @font-face Trick. We all know that CSS3 has introduced a new @font-face rule. With this, we can get out of using only “web-safe” fonts.


As others have pointed out, you could just move the actual h2 element and place it under the figure, but it seems you want to see if its possible with css alone.

There are a few ways, not ideal ways, but there are ways:

  1. You could adjust the margins of both elements, for example, the h2 element will have a top margin of 50px and the figure element will have a top margin of negative 50px (-50px) (probably one of the worst ways to do it)
  2. Another way is to simply give the elements a table layout display of table-footer-group and table-header-group like this:

<h2 style="display: table-footer-group;">Headline</h2>
<figure style="display: table-header-group;">
 <img src="" alt="">
 <figcaption>text</figcaption>
</figure>
<p>Text text</p>

CSS-Tricks is hosted by Flywheel, the best WordPress hosting in the business, with a local development tool to match. ShopTalk is a podcast all about front-end web design and development.


When discussing these attributes you'll need a diagram to see what part of the spacing we're talking about. Have a look at the diagram below and check out the three areas that surround every block-level page element. Together, they form the box that the element takes up. CSS Borders are discussed in a separate


Imagine for a moment that your webpage is an outline and the topic of your outline is the “title” of your page (the one in your title tag) and the H1 tags are your first level topics under your title. Now H2 tags are sub topics that support whatever is in H1. H3 support what is in H2 and H1 and so on all the way down to H6 (if you have them).


Typically I would place my CSS code in a separate CSS file and link to it so that I could reuse the CSS code on many pages. In the above CSS code you will notice that I insert a background image for each ID (headline1 and headline2) and I increase the padding at the top (padding-top:68px) to push down the text to make space for the background