Photoshop Question posted in
The official user guide can be found here.

How to align h2 and p on same basline in div – Photoshop

I have a post header div with height of 70px/4.375em
In it is a category h2 and a p timestamp

I want it to be aligned as demonstrated in this picture
(made in Photoshop)

Here is my HTML:

<div class="post-header" style="background-color:#9377d8">
    <h2 class="category">Technology</h2>
    <p class="timestamp">Saturday, today</p>
</div>

And my CSS:

.post-header{
    height:4.375em;
    width:25em;
    margin-bottom:0;
    float:left;
}
.category{
    color:white;
    display:inline;
    float:left;
    margin:0.625em;
}

.timestamp{
    color:white;
    display:inline;
    float:right;
    margin:0.625em;
}

Please help me with the CSS to get the design that I want

Tags:

2

Answers


  1. 0

    You can change your CSS as follows:

    .post-header {
    height:4.375em;
    width:25em;
    margin-bottom:0;
    display:block;
}
.category {
    color:white;
    display:inline-block;
    width:45%;
    margin:0.625em;
}
.timestamp {
    color:white;
    display:inline-block;
    text-align:right;
    margin:0.625em;
    width:40%;
}

    This way, you get better control over your layout since you can specify both the width and the vertical align of the element. As we’re at it, I’d use percentages for margins, but of course it goes on you

    Visit fiddle to see it in action

    Login or Signup to reply.
  2. 0

    You could try the following. Instead of floats, use inline-blocks with text-align: justify.

    This only works if there at least two lines of text, so generate an extra blank line with the pseudo-element .post-header:after.

    .post-header {
  height: 4.375em;
  width: 25em;
  margin-bottom: 0;
  float: left;
  text-align: justify;
}
.category {
  color: white;
  margin: 0.625em;
  display: inline-block;
}
.timestamp {
  color: white;
  margin: 0.625em;
  display: inline-block;
  text-align: right; 
}
.post-header:after {
  content: "";
  display: inline-block;
  width: 100%;
}
    <div class="post-header" style="background-color:#9377d8">
  <h2 class="category">Technology</h2>
  <p class="timestamp">Saturday, today</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search