W3.css Height alignement in a container

VonDriguen · October 13, 2016

Dear all,

I try to make a responsive header with an image on the left and a text on the right. But they never have the same size and I would like to avoid using px size in the style to be sure that is will stay responsive.

Example code:

<header>
	<div class="w3-row">
		
		<div class="w3-quarter w3-border">
			<img src="images/logo.png" alt="logo">
		</div>

		<div class="w3-rest w3-grey">
			<p class="w3-padding">
				This is the first line<br>
				This is the second line.<br>
			</p>
		</div>
	</div>
</header>

Result:

I though that it may be because the image is bigger than the text so I have tried to following:

<header>
	<div class="w3-row">
		
		<div class="w3-quarter w3-border">
			<img src="images/logo.png" alt="logo">
		</div>
		
		<div class="w3-rest w3-grey">
			<p class="w3-padding w3-xlarge">
				This is the first line<br>
				This is the second line.<br>
			</p>
		</div>
	</div>
</header>

Result:

How may I correct this? By example, is this possible to set a height size in % and center the image on the height of the container?

Many thanks in advance for your help!!!

dsonesuk · October 13, 2016

display: flex to rescue

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style> 
.dsonesuk_flex {
    /*width: 220px;
    height: 300px;*/
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex;
vertical-align: middle;
}

.dsonesuk_flex > div {
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: 1;
vertical-align: middle;
}
.dsonesuk_flex > .logo {text-align: center;}
.dsonesuk_flex > .logo img {vertical-align: middle; display: inline; margin:0;  }
.dsonesuk_flex > .logo:before {content: ''; width: 0; vertical-align: middle; height: 100%; display: inline-block;   }
</style>
</head>
<body>

<header>
	<div class="w3-row dsonesuk_flex">
		
		<div class="w3-quarter w3-border  w3-red logo">
			<img src="http://www.w3schools.com/w3css/img_car.jpg" alt="logo" height="100">
		</div>
		
		<div class="w3-rest w3-grey">
			<p class="w3-padding w3-xlarge">
				This is the first line<br>
				This is the second line.<br>
			</p>
		</div>
	</div>
</header>


<p><b>Note:</b> Internet Explorer 9 and earlier versions do not support the flex property.</p>

<p><b>Note:</b> Internet Explorer 10 supports an alternative, the -ms-flex property. IE11 and newer versions fully support the flex property (do not need the -ms- prefix).</p>

<p><b>Note:</b> Safari 6.1 (and newer) supports an alternative, the -webkit-flex property.</p>

</body>
</html>

Sign In

W3.css Height alignement in a container

Recommended Posts

VonDriguen

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity