lunakid
lunakid
Programming language:CSS
2021-03-19 12:47:10
9
Q:

css center text in div

davi
davi
Code: CSS
2021-02-23 05:16:27 
.class {
	text-align: center;
}
19
user57421
user57421
Code: CSS
2021-02-15 21:13:55 
/* For horizontal align: */
parent-element {text-align:center;}
/* For horizontal and vertical align: */
parent-element {position: relative;}
element-to-be-centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* See https://www.w3schools.com/css/css_align.asp for more info */
0
Igid
Igid
Code: CSS
2021-02-13 08:51:22 
.container{	
	margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  	width: /* Define the width here; */
    height: /* Define the height here; */
}

/*You have to define the width and height! */
2
15eme Doctor
15eme Doctor
Code: CSS
2021-01-22 09:32:54 
/* To center text, you need to use text-align. */

.centerText {
  text-align: center; /* This puts the text into the center of the 
  screen. */
}

/* There are also other things that you can use in text-align:
left, right, and justify. Left and right make the test align to the
right or left of the screen, while justify makes the text align both
sides by spreading out spaces between some words and squishing others. */
8
Alba English
Alba English
Code: CSS
2021-01-20 05:54:27 
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
1
Henry
Henry
Code: CSS
2021-02-04 17:39:18 
.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
-1
Cem Kaya
Cem Kaya
Code: CSS
2021-02-04 17:37:38 
.container {
    position: relative;
    float: right;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.container img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    min-width: 100%;
    height: 100%;
    /* height: auto; */
    /* min-height: 100%; */
    margin-right: -50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    -o-object-fit: contain;
}
3
Cathy
Cathy
Code: CSS
2021-04-08 18:22:54 
text-align: center
4
Inda
Inda
Code: CSS
2021-03-01 02:58:17 
<!--center text-->
<!--padding deals with margins within the element itself-->
<!--margin deals with blank space surrounding and element-->
<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin: auto;
  width: 80%;
  border: 3px solid #73AD21;
  padding: 10px; 
  margin: 20px;
}
</style>
</head>
<body>

<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>

<div class="center">
  <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>

</body>
</html>
1

Tags

Related

New to Communities?

Join the community