CODEWITHSUNDEEP
css
user2272316
user2272316

Reputation: 13

How to float image in the middle?

I'm setting up a new business blog and I'm having troubles getting the main logo to be centered in the middle of the header.

I know you can use:

#logo { float: left; }
#logo { float: right; }

But from what I can see floating in the middle isn't an available option.

Any suggestions?

Site I'm having problems with: http://bit.ly/Yrcm5z

Upvotes: 1

Views: 1344

Answers (3)

Sunyatasattva
Sunyatasattva

Reputation: 5840

Use the following css on your #logo img

#logo img {
    margin: 0 auto;
}

Your img is displayed as a block element, and, as such, giving a margin value of auto tells the browser to calculate the available margin inside the parent element and share it equally on both sides of the block.

Upvotes: 1

Ritesh Kumar Gupta
Ritesh Kumar Gupta

Reputation: 5191

Use text-align in new a paragraph or div. 

<p><img src="http://legendarymarketer.com/wp-content/themes/wp-theme-simplog/assets/img/logo.png" height="30" width="235" alt="" style="
    text-align: center;
"></p>

Change the CSS: [Line 104 of style.css file]

#logo img {
display: inline;
}

Upvotes: 0

Santiago Baigorria
Santiago Baigorria

Reputation: 696

Use

<div>
    <a id="logo"></a>
</div>

And CSS

#logo {display: inline-block; }

div {text-align: center; }

Sory, and for the record, this method works because display: inline-block; elements behave as text, so you can align the as it inside a container.

Greeting from Argentina!

Upvotes: 0

Related Questions