CODEWITHSUNDEEP
htmlcss
Maninder
Maninder

Reputation: 1261

How to dispaly the logo icon at the center for all device width?

I have the following Html Markup in my website:

<div id="header">
    <div class="flyoutMenuButtons visible-phone">
        <a href="#navigation" class="open-menu"><i class="icon-reorder icon-3x"></i></a>
        <a href="#" class="close-menu"><i class="icon-reorder icon-3x"></i></a>
    </div>
    <div id="logo_and_search">
        <a id="logo" href="/" title="abc">
            <img src="abc.png" height="40" width="136">
        </a>                  
    </div>
</div>

I would like the logo to be diaplayed in center for all device widths. What style shall I apply to the "#logo" element in order make it display in center for all devices other than desktops and tablets?

Upvotes: 0

Views: 83

Answers (3)

Andrew
Andrew

Reputation: 5340

#logo {
    display: block;
    width:136px; /* the same as the logo*/
    margin: 0 auto;
}

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

use like this:

a#logo{
display: block;
text-align: center;
}
a#logo img{
display: inline-block;
}

Upvotes: 1

Aram Mkrtchyan
Aram Mkrtchyan

Reputation: 2700

something like this but if you give fiddle example it be fine

#logo_and_search {
width:100%;
}

#logo {
display: block;
margin: 0 auto;
}

Upvotes: 0

Related Questions