CODEWITHSUNDEEP
htmlcss
Awn
Awn

Reputation: 929

Align an image in div with text below

I've looked for a previous answer that helped me but couldn't find one.

HTML:

  <section id="pane_one">
    <h1 id="logo">lel</h1>
    <h2 id="hello"><span>Hello.</span> You&rsquo;ve reached my page.</h2>
  </section>

CSS:

section#pane_one {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
    min-height: 450px;
    height: 700px;
}

h1#logo {
    position: absolute;
    z-index: 0;
    width: 200px;
    height: 200px;
    background-color: #000;
    text-indent: -9999px;
    top: 35%;
    left: 44.5%;
    margin-top: -65px;
    margin-left: -33px;

    background: url('https://i.imgur.com/RMQi9Js.jpg') center center no-repeat;

    background-size: 100%;
    border-radius: 50%;
    border: solid black;
}

How do I set it up so that no matter the zoom of the page, the div/image is always horizontally aligned with the text below it?

The site is: http://libeclipse.me/

Upvotes: 0

Views: 113

Answers (2)

Khan Luke
Khan Luke

Reputation: 168

<html>
<head>
<style>
section#pane_one {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
    min-height: 450px;
    height: 700px;
}

h1#logo {
position:relative;
    z-index: 0;
    width: 200px;
    height: 200px;
    background-color: #000;
    text-indent: -9999px;
    top: 200px;
display: inline-block;
    background: url('https://i.imgur.com/RMQi9Js.jpg') center center no-repeat;
    background-size: 100%;
    border-radius: 50%;
    border: solid black;
}

h2#hello {
position:absolute;
top:0px;
width:100%;
margin:auto;
}
</style>
</head>
<body>
  <section id="pane_one">
    <h1 id="logo">lel</h1>
    <h2 id="hello"><span>Hello.</span> You&rsquo;ve reached my page.</h2>
  </section>
  </body>
<html>

Review this and make note of the margin:auto (Centered the h2text in absolute position) and display:inline-block(Centered the bunny image).

Removed the left % and margins that were present from h1#logo. Enjoy.

Thanks.

Upvotes: 2

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

On the h1#logo rule change the left to 50% and the margin-left to -100px

Upvotes: 1

Related Questions