line height

最新推荐文章于 2024-09-23 17:12:42 发布

faye_yang18

最新推荐文章于 2024-09-23 17:12:42 发布

阅读量303

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/faye_yang18/article/details/80572315

版权

今天被line height折磨惨了，我知道它与height相同时，可以实现单行文字的垂直居中，但今天实施地时候发现了很多小问题。

<!DOCTYPE html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				font-size: 20px;
				line-height: 200px;
				/*background-color: darkcyan;*/

			}
			div{
				margin: 0;
			}
		</style>
	</head>
	<body>
		
		<div style="height: 200px; width: 250px; background-color: red;">
			<p>单行文字垂直居中</p>
		</div>
	</body>
</html>

得到以下的结果

下面是我另一个实例，一个小名片。

下面为html代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Fundamental CSS comprehension</title>
    <link rel="stylesheet" href="text.css" />
  </head>
  <body>

  <section class="card">
    <header>
      <h2>Chris Mills</h2>
    </header>
    <article>
      <img src="chris.jpg" alt="A picture of Chris - a man with glasses, a beard, and a silly wooly hat">
      <p>50 My Street</br>
         The Town<br>
         Gray Peach<br>
         UK<br>
         ZO50 1MU<br>
        <strong>Tel</strong>: 01234 567 890<br>
        <strong>Mail</strong>: chris@nothere.com</p>
    </article>
    <footer>
      <p>Editing, writing, and web development services</p>
    </footer>
  </section>

  </body>
</html>

以下为css代码

/* General styles - put these straight into your stylesheet */

body {
  margin: 0;
}

html {
  font-family: 'Helvetica neue', Arial, 'sans serif';
  font-size: 10px;
  background-color: #ccc;
}

/* Rulesets to be matched up with selectors */

.card {
  width: 35em;
  height: 22em;
  margin: 5em auto;
  background-color: red;
  border: 0.2em solid black;
  border-radius: 1.5em;
}

.card header {
  background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
  border-radius: 1.5em 1.5em 0 0;
}

.card footer {
  background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
  border-radius: 0 0 1.5em 1.5em;
}

.card article img {
  max-height: 100%;
  float: right;
}

.card header,footer {
	height: 3em;
	padding: 1em;
	line-height: 3em;
}
h2,p {
	margin: 0;
}

article {
	height: 12em;
	background-color: rgba(0,0,0,0.3);
	box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
h2{
	font-size: 2em;
	/*line-height: 3em;*/
}

footer p {
	font-size: 1.5em;
	line-height: 1.5em;
}
article p {
	padding: 1em;
	line-height: 1.5em;
	color: rgba(255,255,255,0.8);
}

重点来了，当我把line-height放在h2选择器中时得不到chris mills这个标题垂直居中的效果，只有放在header中才可以，我到现在也没有想通，郁闷

下面为错误的结果