CSS怎么让图片居中

html-css021

CSS怎么让图片居中,第1张

1、首先先在页面里加载一张图片,代码和效果如下图所示:

2、然后设置给图片起一个class名,方便一会儿的操作。

3、然后给图片设置css样式,因为方便的原因就直接在html页面写css样式了。

4、经常使用“margin: 0 auto”来实现水平居中,而一直认为“margin: auto”是不能实现垂直居中,但是实际上,仅需要添加一些限制便能实现效果,就是通过定位:

position: absolute

top: 0

left: 0

bottom: 0

right: 0

设置定位让上下左右都为0,然后通过margin:0 auto,来让元素实现上下左右都居中。

5、设置完CSS样式之后,通过浏览查看代码的效果就可以,可以看到图片已经实现了。

6、最后给大家附上全部的代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>使用CSS让图片水平垂直居中</title>

</head>

<body>

<img class="pic" src="img/timg.jpg" alt="" />

</body>

<style type="text/css">

.pic{

margin: auto

position: absolute

top: 0

left: 0

bottom: 0

right: 0

}

</style>

</html>

<style>

.tongpian6 {

height: 50px

padding-left: 20px

vertical-align: middle

}

</style>

<table border="1">

<tr>

<td class="tongpian6">hehehe</td>

</tr>

</table>

因为:

1、表格内左边距使用padding-left,而不是margin-left。margin-left叫外左边距。

2、单元格垂直居中,设定vertical-align为middle,而不是bottom(靠下)。

扩展资料:

css文本和div垂直居中方法总结

对文本,只需要对其父级元素设置text-align: center,而对div等块级元素,只需要设置其left和right的margin值为auto。

要实现元素的垂直居中,有人会想到css中的vertical-align属性,但是它只对拥有valign特性的元素才生效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。

1、单行文本垂直居中

对于单行文本,我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可:

<!--html代码-->

<div id="div1">

这是单行文本垂直居中

</div>

/*css代码*/

#div1{

width: 300px

height: 100px

margin: 50px auto

border: 1px solid red

line-height: 100px/*设置line-height与父级元素的height相等*/

text-align: center/*设置文本水平居中*/

overflow: hidden/*防止内容超出容器或者产生自动换行*/

2、子div垂直居中

<!--html代码-->

<div id="outer">

<div id="middle">

子div(固定大小)垂直居中

</div>       

</div>

/*css代码*/

#outer{

background-color: #13CDF4

width: 300px

height: 200px

position: relative

}

#middle{

background-color: #E41627

width: 100px

height: 100px

margin: auto

position: absolute

left: 50%

top: 50%

margin-left: -50px

margin-top: -50px

}

做法如下:    1.为表格(<table>标签)设置一个具体的宽度

2.添加一个属性 margin: 0 auto

具体代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge"/>

    <title>Hello, HTML5</title>

    <style>

        /*  在此处填写叠层样式  */

        body, html{

            height: 100%

            width: 100%

            margin: 0 padding: 0

        }

        table {

            height: 80%

            width: 80%         /*  必须设置一个宽度, margin: 0 auto才能使之居于父组件中央*/

            margin: 10px auto  /*  通过设置外边距(margin)中的左右外边距属性为auto使之居于父组件(body)中间*/

        }

            table tr{

                height: 40px

                width: 100%

                background-color: red

            }

            table>tr>td{

                height: 100% width: 33.3%

                background-color: red

            }

    </style>

    <script>

        /*  在此处填写JavaScript代码   */

    </script>

</head>

<body>

<table>

    <tr>

        <td>12</td>

        <td>12</td>

        <td>12</td>

    </tr>

    <tr>

        <td></td>

        <td></td>

        <td></td>

    </tr>

    <tr>

        <td></td>

        <td></td>

        <td></td>

    </tr>

</table>

    <!-- 在此处编写HTML页面  -->

</body>

</html>