How to align text differently inside a single inline element with CSS?


Tags: css,html5,css3,alignment,inline

Problem :

This should be interesting. Here's what I'm trying to do with CSS:

  1. The words "An Example Alignment" should be in a single <h1> element.
  2. The word "Alignment" should be on the second line (easy with a <br /> tag).
  3. The word "An" should be smaller than the other words (easy with a <span> tag).

enter image description here

So we have:

<h1><span>An</span> Example <br />Alignment</h1>

But here's the catch:

  • I would also like to align the first letters of the 2nd and 3rd words with each other vertically, and that's where I run into problems.

Here's what it should look like: http://jsfiddle.net/Baumr/H2Pzr/

But that's an ugly solution as there are two <h1> elements.

Any ideas of how to do this with CSS by keeping the HTML the same? Very curious to hear. Thank you in advance.

P.S. I could also put "An" into a separate <span>, but I would prefer to keep everything in a single <h1>.)



Solution :

I would use two span classes in the same H1 tag:

<h1>
    <span class="small-text">An</span> Example 
    <span class="line-two">Alignment</span>
</h1>

Then update your CSS accordingly:

h1 {
    font-size: 30px;
}

span.small-text {
    font-size: 20px;
}

.line-two{
    display:block;
    margin-left: 31px;
}

You don't even need the <br /> since you can just display the second span as display:block; Updated fiddle here: http://jsfiddle.net/H2Pzr/6/


    CSS Howto..

    Apple's Website - How Does It Autosize Itself For Mobile Devices?

    How to vertically center div in floated div?

    How do I push inline elements onto the next line

    How to reference a long class name with spaces in CSS?

    How to find out if an element is in a fixed positioned container?

    ExtJS - How to customize buttons?

    img not showing in Safari in attempt to make img map responsive

    How to create css shadow effect [duplicate]

    How can a site Use Javascript and NOT display any structural HTML in the browser?

    How to toggle a separate drop down beneath a grid of items using JQuery?

    Pure.css 1-3 grid only shows 2 items per line

    How to display a dynamic rating based on css and the value from PHP? [closed]

    D3js SVG open lines display a fill artifact, how to fix it?

    how to flip the div using css?

    How to align lists to top right?

    How do I center text relative to its parent div with CSS?

    How to animate the position change or float: left on window size change?

    How to test a webpage for different aspect ratios

    How do I make images fit the entire screen fully, regardless of screen size?

    How to simplify CSS code

    How to use a different stylesheet for iphone or android? I can modify only html later on

    How to capture extra css class in addition to the pseduo class in this less (css) code?

    how to create a multi column list with css?

    How to Hide a Textbox with only CSS

    How to create custom horizontal radio buttons with CSS?

    How to access and modify imported .css files in WordPress style.css file?

    How can I add a css element change to an onlick event in this jquery lib?

    how to set formatting of all textbox in asp.net website with css, without set cssclass property of each textbox

    how to define minimum height for tbody in css

    How to put the hover image above the original image