How to position children with respect to parent in CSS?


Tags: html,css

Problem :

I am using HTML 5 with CSS 3. The scenario is like this.

<div style="margin-top: 50px; background-color: red; padding: 10px 0px 10px 0px; width: 100%">
<span>This text must be in center of div</span>
<a href="somepage.html"><img src="/image.jpg" alt="This image must be on left side of div"/></a>
</div>

The text and image must be in single line. How do I do that ?



Solution :

Example

Example

To position an element with respect to its parent, you give the parent any position value besides static (generally relative) and the child position: absolute.

In keeping with your inline CSS...

<div style="margin-top: 50px; background-color: red; padding: 10px 0px 10px 0px; width: 100%; text-align: center; position: relative;">
    This text must be in center of div
    <img src="/image.jpg" alt="This image must be on left side of div" style="position: absolute; left: 0;"/>
</div>

jsFiddle.

However you should consider using classes, ids and an external stylesheet.


    CSS Howto..

    How to keep links and hover effects on my icon-fonts isolated with CSS

    How to change CSS class of a HTML page element using ASP.NET?

    How to overlay a play button over a thumbnail image using only CSS

    How to set CSS position properties to none ?

    How to make liquid layout in css using em?

    PrimeFaces: how to override CSS class

    How would I detect CSS Transition support on :before pseudo-elements with javascript?

    How can I use bootstrap in css file?

    How to apply css style to custom attributes

    How are table cell widths calculated in html?

    JQuery - show/hide rows and manipulate css

    how to make a responsive website using html/css and javascript [duplicate]

    How to find the css class of an anchor link inside a cross domain iFrame?

    How to remove an element without id

    how to edit input type data with CSS [duplicate]

    How to remove the blue halo glow from jQuery Mobile input elements that receive focus

    How to call in Javascript a requestAnimationFrame loop?

    How to add custom css in Cognos?

    how to get the height of a div with overflow:auto property set in css

    How can I make a Div that stays on its position?

    How to convert a piece of CSS code to LESS css

    How to control the layout in JSF?

    How can I center the below form?

    How to change expand div after click and collapse it after another click?

    Bootstrap 3 - How to change the hyperlink title text showing as tooltip using javascript/jquery?

    How to use display:flex in CSS to create a mix of fixed with and dynamic proportional width columns?

    How to align radio buttons with labels in one line? [duplicate]

    How can I make my jquery mobile collapsible set larger using css

    how would I have the image in this div with rollover not get the overlay?

    How to build this layout with CSS?