Home / Questions / 74849
Accepted
simon
Asked: 2020-06-01 13:40:01 +0800 CST 2020-06-01 13:40:01 +0800 CST

如何使用 CSS 使文本左对齐或右对齐？

  • 772

您好朋友，我有以下代码可以正常工作，但是当我想证明文本的合理性时，一切都以自身为中心，而不是左右放置。

是否有任何 CSS 属性能够在文本位于右侧和左侧时使文本对齐？

我的代码：

body,
html{
/*
	height:100%;
	width:100%;
	position:relative;
	background-image:url(https://rolandocaldas.com/wp-content/uploads/2013/05/css3.png),
	url(https://rolandocaldas.com/wp-content/uploads/2013/05/css3.png);
	background-repeat:no-repeat,no-repeat;
    background-position:top left , top right;
*/
}

.texto1{
	font-style:normal;
	/*HERMOSA PROPIEDAD CSS*/
	font-variant:small-caps;/*CAMBIA TODO A MAYUSCULA Y LE PONE UN ESTILO TIPO LIBRO*/
    /*font-weight:lighter;/*normal,bold,ligh,lighter,100-900*/
    font-size:100%;
    line-height:30px;/*Separa cada linea de texto  de la otra que sigue*/
    font-family:arial;
    text-align:right;



}

.texto2{

	font:italic small-caps 400 100%/30px arial;
	text-align:left;


}
<!DOCTYPE html>
<html>
<head>
	<title>Index</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>


<p class="texto1">
	
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

<p class="texto2">
	
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>



</body>
</html>

css

1 Answers

  1. Best Answer

    您可以使用 CSS 属性direction来指示文本的方向：rtl(right to left)或者ltr(left to right)与哪个组合text-align: justify会产生您想要的效果。

    您更正的示例：

    body,
html{
/*
	height:100%;
	width:100%;
	position:relative;
	background-image:url(https://rolandocaldas.com/wp-content/uploads/2013/05/css3.png),
	url(https://rolandocaldas.com/wp-content/uploads/2013/05/css3.png);
	background-repeat:no-repeat,no-repeat;
    background-position:top left , top right;
*/
}

.texto1{
	font-style:normal;
	/*HERMOSA PROPIEDAD CSS*/
	font-variant:small-caps;/*CAMBIA TODO A MAYUSCULA Y LE PONE UN ESTILO TIPO LIBRO*/
    /*font-weight:lighter;/*normal,bold,ligh,lighter,100-900*/
    font-size:100%;
    line-height:30px;/*Separa cada linea de texto  de la otra que sigue*/
    font-family:arial;
    direction: rtl;
    text-align: justify;


}

.texto2{

	font:italic small-caps 400 100%/30px arial;
	direction:ltr;
  text-align: justify;


}
    <!DOCTYPE html>
<html>
<head>
	<title>Index</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>


<p class="texto1">
	
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

<p class="texto2">
	
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>



</body>
</html>

    • 6