Click here to Skip to main content
15,937,779 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Disclaimer: I know almost nothing about html

I am trying to positioning the text at center, horizontally and vertically. The issue is my code do that for the first div only, and I repeat more div, one after another (vertically). Can you fix my trial from below ?

What I have tried:

HTML
<pre><!DOCTYPE html>

<html>
<head>
	<title>Horizontal and Vertical alignment</title>
	<style>
	
	.container {
		height: 200px;
		width: 400px;
		border: 2px dashed #4b2869;
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		position: relative;
	}
	.container1 {
		height: 200px;
		width: 400px;
		border: 2px dashed #4b2869;
		display: table-cell;
		text-align: center;
		vertical-align: bottom;
		position: absolute;
	}
	</style>
</head>

<body style="background-color:#646464;">
	<div class="container">container</div>
	<div class="container1">container1</div>
</body>

</html>
Posted
Updated 24-Mar-23 4:17am
Comments
_Flaviu 20-Mar-23 10:24am    
So, I have tried
HTML
Expand ▼




<title>Horizontal and Vertical alignment


.container {
height: 200px;
width: 400px;
border: 2px dashed #4b2869;
display: table-cell;
text-align: center;
vertical-align: middle;
position: relative;
}
.container1 {
height: 200px;
width: 400px;
border: 2px dashed #4b2869;
display: table-cell;
text-align: center;
vertical-align: bottom;
position: absolute;
}




container
container1




Outcome:
https://ibb.co/XJWv19n
But I want those two DIVs to be one under the other: https://ibb.co/jWbQ0DH

Add following style
CSS
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}

and in HTML Modify as
HTML
<div class="container1 center">container1</div>
 
Share this answer
 
Pick the way the you want to do it: 11 Ways to Center Div or Text in Div in CSS[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900