user266865
user266865
Programming language:CSS
2021-04-09 16:36:06
0
Q:

how to center text in css

davi
davi
Code: CSS
2021-02-23 05:16:27 
.class {
	text-align: center;
}
19
Chris
Chris
Code: CSS
2021-01-19 04:38:27 
<switch>
    h1 {
    text-align: center;
}

p.date {
    text-align: right;
}

 
p.main {
    text-align: justify;
} 
</Switch>
4
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
Cees Timmerman
Cees Timmerman
Code: CSS
2021-09-28 06:11:13 
body {
  text-align: center;
}
0
confused
confused
Code: CSS
2021-04-06 16:59:05 

    div.a {
  text-align: center;
}


    div.b {
  text-align: left;
}


    div.c {
  text-align: right;
}

div.c {
  text-align: 
    justify;
}
4
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
Medicore Bunny
Medicore Bunny
Code: CSS
2021-02-27 23:04:35 
# center text
.center {
  text-align: center;
  
border: 3px solid green;
}
1
Doug
Doug
Code: CSS
2021-03-15 16:48:17 
/* html */
<h1>Centering with CSS</h1>

<h3>Text-Align Method</h3>
<div class="blue-square-container">
  <div class="blue-square"></div>
</div>

<h3>Margin Auto Method</h3>
<div class="yellow-square"></div>

<h3>Absolute Positioning Method</h3>
<div class="green-square"></div>

/* css */
h1,
h3 {
  text-align: center;
}

.blue-square-container {
  text-align: center;
}

.blue-square {
  background-color: #0074D9;
  width: 100px;
  height: 100px;
  display: inline-block;
}
0

Tags

Related

New to Communities?

Join the community