Home > Web Front-end > CSS Tutorial > How to center css text

How to center css text

anonymity
Release: 2019-05-28 15:23:41
Original
12435 people have browsed it

CSS text-align

text-align syntax:

text-align : left | right | center | justify
Copy after login

text-align parameter value and description:

left: left alignment

right: Right alignment

center: Centered

*justify: Justify both ends (not recommended, usually not used by most browsers)

us Commonly used parameter values ​​for text-align are left, right, center

text-align function description:

Sets or retrieves the left-center-right alignment of the text in the object.

How to center css text

Case demonstration:

We set up 3 boxes, set the CSS height and CSS width of the boxes to be the same, and then set them separately The content in the three boxes is aligned to the left, center, and right.

We set the height of the three boxes to 50px and the width to 300px; for ease of observation, we set the three boxes to have a black border style.

1, HTML CSS code

1), CSS code

.div1{ width:300px; height:50px; border:1px solid #000; text-align:left} 
.div2{ width:300px; height:50px; border:1px solid #000; text-align:center} 
.div3{ width:300px; height:50px; border:1px solid #000; text-align:right} 
/*  
div1 div2 div3 分别设置 靠左 居中 靠右对齐 
*/
Copy after login

2), HTML code

<div class="div1">我被靠左对齐</div> 
<div class="div2">我被居中显示</div> 
<div class="div3">我被靠右对齐</div>
Copy after login

The above is the detailed content of How to center css text. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template