Menu
I have an logo in the header of the page and I want to make in centered. This is my html:
body {
width: 90%;
margin: 0 auto;
}
header {
margin-top: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #b5b5b5;
}
.logo {
width: 250px;
height: 150px;
text-align: center;
}<body>
<header>
<div class="row">
<div class="logo-row">
<img src="resources/img/logo.png" alt="logo" class="logo">
</div>
</div>
</header>
533
To center an image, we have to set the value of margin-left and margin-right to auto and make it a block element by using the display: block; property. If the image is in the div element, then we can use the text-align: center; property for aligning the image to center in the div.
One way to center text or put it in the middle of the page is to enclose it within <center></center> tags. Inserting this text within HTML code would yield the following result: Center this text!
Using the <center> tag You can center a picture by enclosing the <img> tag in the <center></center> tags. This action centers that, and only that, picture on the web page.
We use <img> align attribute to align the image. It is an inline element. Attribute Values: left: It is used for the alignment of image to the left.
You need to add a width to the logo-row class and use margin: 0 auto.
body {
width: 90%;
margin: 0 auto;
}
header {
margin-top: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #b5b5b5;
}
.logo-row {
width: 250px;
margin: 0 auto;
}
.logo {
width: 100%;
height: 150px;
text-align: center;
}<body>
<header>
<div class="row">
<div class="logo-row">
<img src="resources/img/logo.png" alt="logo" class="logo">
</div>
</div>
</header>Giving text-align: center to the .logo-row, you may achieve the desired output:
header {
margin-top: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #b5b5b5;
}
.logo-row{
text-align: center;
}
.logo {
width: 250px;
height: 150px;
text-align: center;
} <header>
<div class="row">
<div class="logo-row">
<img src="resources/img/logo.png" alt="logo" class="logo">
</div>
</div>
</header>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
