ansaurus

Question

Answer 1

+1 A:

Why not put the h2 within a span or div, put the image in there and then use padding to position the h2 within that. An h2 is text.

Vernon 2010-07-19 19:18:06

Yes, but if you apply a background image to the `h2`, you can then add visual appeal without any extra HTML markup.

derekerdmann 2010-07-19 19:19:44

Well, that's right, but I would still think it is more manageable in the long run to keep things separate. One can then just add the padding and margins (or if you want to be strange, borders).

Vernon 2010-07-19 19:42:25

Probably not. Avoiding the extra elements will clean up both your HTML and your CSS, since you don't have to manage two separate styles for a single UI element.

derekerdmann 2010-07-20 11:17:27

Answer 2

A:

padding
text-indent
line-height
wrap the text inside with a div/span and margin/padding/text/indent
wrap text inside and position:relative on h2, position absolute on inner text element.

and more.. Take your pick.

meder 2010-07-19 19:18:23

^ line-height is another spanner in your toolbox on top of meder's suggestions.

hollsk 2010-07-19 19:19:48

Answer 3

A:

use css padding:

{
    padding-left:8px;
}

R. Hill 2010-07-19 19:18:41

Answer 4

A:

Yes, you can use padding and alignment to place the text. Example:

h2 {
  font-size:15px;
  line-height: 20px;
  text-align: right;
  padding: 30px 20px 5px 0;
}

Guffa 2010-07-19 19:19:14

Answer 5

A:

<h1 style='display:block; width:100%; height:40px; text-align:center'>text</h1>

Dobiatowski 2010-07-19 19:19:21

Answer 6

A:

You can try adding padding and a constant width / height to position:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
  h2
  {
    background: #DEF;
    width: 400px; height: 100px
    padding: 40px 40px;
  }
</style>
</head>
<body>
  <h2>Sample</h2>
</body>
</html>

Kevin Sylvestre 2010-07-19 19:20:02

ansaurus

tags:

views:

answers:

CSS: position text inside an h2

related questions