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

How align a image and avoid text below in title using HTML CSS – Photoshop

I would like to create a page header with a icon. However sometimes the page titles becomes too big and wrap to another line.

for now my result is:

actual result

but I would like to get this result (photoshoped)
desired result

Important! the icon must be aligned to the first line, like above picture.

Here is my HTML code:

<div class="page-header">
<div class="header-icon"><img src="to_do.png"></div>
<h1  class="page-title" >Não está em aula <small>2016-02-14  14:04</small></h1>
</div>

Here is my CSS

.page-header .header-icon{
    display: inline-block;
    vertical-align: middle;
    padding-right: 10px;
}

.page-header .page-title{
    display: inline;
    vertical-align: middle;
}
Tags:

2

Answers


  1. 0

    The very simple answer (which some people will disapprove of) is to create a 2 column, 1 row table – the image goes in column one, the text in column two.

    This way, any text overflow is catered for within column two – the separation between the image and the text is maintained.

    I think this is a perfectly acceptable use of a simple presentational table when you have an image / text combination on one line (which happens often).

    Whatever others say, this is the simplest way to do it.

    Login or Signup to reply.
  2. 0

    You can define a bigger height for the icon. For this you have to add float:left and a fixed defined height in the .header-icon class.

    For example like this:

    .page-header {
  width: 400px;
}
.page-header .header-icon {
  display: block;
  vertical-align: middle;
  padding-right: 10px;
  float: left;
  height: 100px;
}
.page-header .page-title {
  display: inline;
  vertical-align: middle;
}
    <div class="page-header">
  <div class="header-icon">
    <img src="http://placehold.it/30x30">
  </div>
  <h1 class="page-title">Não está em aula <small>2016-02-14  14:04</small></h1>
</div>

    Alternatively you can use padding-bottom for the .header-icon class.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search