如何用CSS让文字左对齐，图片居中_安全

方法如下：
一、行高（line-height）法
如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：
p
{
height:30px;
line-height:30px;
width:100px;
overflow:hidden;
}
这段代码可以达到效果。
二、内边距（padding）法
另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：
p
{
padding:30px;
}

CSS是层叠样式表。下面，我们来看看怎么使用CSS让水平垂直都居中吧。

新建一张文档

在桌面新建一张文本文档，改名为1txt，如下图所示：

基础代码

然后打开文本文档，编写基础代码，再把桌面上的老虎引入进去，如下图所示：

后缀名

然后把文本文档后缀名改为html，如下图所示：

运行网页

然后在浏览器中运行网页，现在有了，只是还没有居中，居住代码要用CSS写，如下图所示：

CSS代码

然后写上CSS代码，如下图所示：

垂直水平居中

可以看到已经垂直和水平居中，如下图所示：

总代码

<!DOCTYPE html>

<head>

<title>html</title>
<style type="text/css">
picTiger{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

</style>
</head>

<body>

<img class="picTiger" src="C:/Users/Administrator/Desktop/1jpg">

</body>

<html>

HTML CSS中实现DIV中的水平垂直居中对齐的方法：

所谓的水平垂直居中就是把放在一个容器元素中（容器大于尺寸或是指定了大小的容器），并且位居此容器正中间（中间是指元素容器的正中间），而不是以背景（background-image）形式展示，是以<img>元素形式展示的。如下图所示：

1、解决水平居中的办法：如果左浮动并且"display:inline"时，只要给设置一个"text-align:center"属性，就顺利解决了水平居中。

2、解决垂直居中的办法：使用display:table-cell和设置了display:inline-block的线合span。

完整例子：

html代码：

css代码：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
div{
width:800px;
border:1px solid red;
margin:0 auto;
}
img{
width:400px;
height:200px;
vertical-align:middle;
}
  </style>
</head>
<body>
    <div>
<img  src="jingfeng18png" />
<a href="###">baidu:jingfeng18</a>
</div>
</body>
</html>

把换成自己的就行了。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/12867866.html

如何用CSS让文字左对齐，图片居中

发表评论

评论列表（0条）