CODEWITHSUNDEEP
htmlcssalignment
neo
neo

Reputation: 396

How to align div's to center when size of adjacent div's overflows screen width

My question must be little bit confusing and will have many related questions. But I think my case is different.

Please run the code in full screen and reduce the size of the screen to around such that there will be

In both cases there will be lot of empty space to right of the adjacent box, what I want is to align the box to the center and make look both right and left equal when such a case occurs. It should work for both the cases (Two boxes per row & One box per row)

body{
background-color : #E9EAED;
}
.box{
	position: relative;
	width: 400px;
	float: left;
	border: 1px solid rgba(35, 173, 278, 1);
	height: 120px;
	background-color: white;  
	cursor: pointer;
	margin: 15px 15px 15px 15px;

}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="box">box 1 </div>
<div class="box">box 2 </div>
<div class="box"> box 3</div>
<div class="box"> box 4</div>
<div class="box">box 5 </div>
<div class="box">box 6 </div>
<div class="box"> box 7</div>
<div class="box"> box 8</div>
<div class="box"> box 9</div>
<div class="box"> box 10</div>
<div class="box">box 11 </div>
<div class="box">box 12 </div>
<div class="box"> box 13</div>
<div class="box"> box 14</div>
</body>
</html>

Upvotes: 1

Views: 79

Answers (1)

Frutis
Frutis

Reputation: 489

Add to body

body {
text-align: center;
}

And change the box class

.box {
float: left; //remove this
display: inline-block; //add this
text-align: left; // that your text would be aligned normally again
}

Upvotes: 3

Related Questions