Home >Web Front-end >HTML Tutorial >How to center the P tag in a DIV tag both horizontally and vertically in HTML?
How to center the P tag in a DIV tag both horizontally and vertically in HTML?
- 黄舟Original
- 2017-07-03 13:51:3511865browse
How to center the P tag in the DIV tag both horizontally and vertically in html?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>让DIV标签中的P标签水平和垂直都居中</title>
<style type="text/css">
div {
width:400px;
height:300px;
border:1px solid #666;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;
}
p {
border:1px solid #333;
width:100%;
}
* { margin:0; padding:0;}
</style>
</head>
<body>
<div>
<p>我是多行文本，我要水平和垂直都居中。</p>
<p>且要完全兼容ff和ie。我是多行文本，我要水平和垂直都居中。且要完全兼容ff和ie。</p>
</div>
</body>
</html>The above is the detailed content of How to center the P tag in a DIV tag both horizontally and vertically in HTML?. For more information, please follow other related articles on the PHP Chinese website!
Statement：
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
Previous article：Problem with p tag misalignment in htmlNext article：Problem with p tag misalignment in html