Heading image and h1 alignment

HTML-CSS
1

Hi All,

I’m trying to produce a heading line with a centred h1 element and an image to the right roughly in line with the larger image below it.

Its taken a while to get both elements to behave in the same row, but I can’t figure out how to position each element where I’d like it. Any help would be much appreciated.

https://codepen.io/JimmyT91/pen/XEBwzo

Thanks

<div class="header">
   <h1 class="Questrial">Isambard Kingdom Brunel</h1>
  <img class="smaller-image thin-border" src="https://preview.ibb.co/gZU3XH/isambard_kingdom_brunel_3.jpg">
  </div><!--Close header-->
<h2 class="Questrial text-center"><i>The father of modern engineering</i></h2>
  <div class="imgbed">
<img src="http://www.simplyremovalsbristol.co.uk/wp-content/forum/uploads/2016/12/shutterstock_518016748-850x638.jpg" alt="Image of Clifton Suspension Bridge" class="img1">
<figcaption class="figure-caption Questrial text-center"><i>Clifton Suspension Bridge, Bristol. Based on a design by Brunel and completed in 1864</i></figcaption>
  </div>

<link href="https://fonts.googleapis.com/css?family=Questrial|Source+Code+Pro" rel="stylesheet">
  .Questrial {
    font-family: Questrial
  }
.smaller-image {
  width: 120px;
  height: 120px;
  float: right;
}
.thin-border {
  border-width: 2px;
  border-style: solid;
  border-color: black;
  border-radius: 30px;
}
.header {
    width: 100%;
}
.header h1 {
  display: inline;
}
  h1 {
    font-size: 40px;
    color: #ffffff;
    text: center;
  }
  h2 {
    font-size: 25px;
    color: #ffffff;
  }
h3 {
  font-family: Questrial;
  color: #ffffff;
  font-size: 20px;
}
  .img1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
2

I recommend you read about accessibility. “Here” is not an accessible link.

Applied Accessibility: Give Links Meaning by Using Descriptive Link Text

vertically or horizontally?

Anyway, I am thinking CSS display: grid already for this.

3

Thanks, will have a read through that.

I’m trying to get the right hand edge of each image to line up vertically and the heading text centred.

4

Have a look at what display grid can do.

5

That’s really useful, thanks. I’ve managed to set up all my relevant elements in a grid but I’m still a little unsure about how to set my heading correctly within the grid. I’d like it vertically centred with the portrait and centred within the page. Is it possible to give it an offset within the grid zone so that it’s centred where I’d like it? (I’ve made the grid background blue just so I can see clearly the grid I’m working with.

Edit: Link to fork with grid https://codepen.io/JimmyT91/pen/Gxzdqr

6

That looks fine to me. I’m not sure what you mean by offset.

7

I want to make the heading central on the page. With the grid set up the way it was, the heading was central within its cell but not on the page.

I’ve done a little work around by creating a blank cell in the grid on the left of the row that’s the same width as the portrait, so that the heading text is centred.

.heading {
  grid-area: heading;
}
.blank {
  grid-area: blank;
  width: 120px;
  height: 120px;
}
.portrait {
  grid-area: portrait;
}
.sub {
  grid-area: sub;
}
 .imgbed {
  grid-area: image;
}  
.grid-container {
  display: grid;
  grid-template-areas:
    'blank heading heading heading portrait'
    'blank sub sub sub portrait'
    'image image image image image';
  grid-gap: 2px;
  padding: 2px;
}
.grid-container > div {
  text-align: center;
}
1 Like