一个div的子div宽是200高是350 里面怎么让图片显示一半 另外一半文字居中！？
#div1{
width: 200px;
height:350px;
background-color: red;
float:left;
margin-top:5px;
margin-left: 5px;
margin-right: 5px;
background-image: url(huoying.png ) ;
background-size:200px 200px;
background-repeat:no-repeat;
我设置文字方向后div自己改变了大小
weixin_慕勒5354261浏览 998回答 1
1回答
-
李晓健
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no" name="format-detection"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"> <meta http-equiv="Cache-Control" content="max-age=300"/> <title>test</title> </head> <body> <div> 这里是文字 </div> </body> </html> div{ margin: 0 auto; /* 这里是为了让div居中 你可以不需要 */ outline: 1px solid red; /* 这里是为了看到div的边界 你可以不需要 */ width: 200px; height: 350px; background-image: url("0.jpg"); background-repeat: no-repeat; background-size: 100px 350px; /* 这里宽是要div的一半 就是100px 高你可以根据需要自行设定 */ background-position: left center; /* 这里是为了让背景图靠左 center值你可以改成其他的看你自己有需求 */ box-sizing: border-box; padding-left: 100px; /* 这里是让div左边有它自己一半宽度的边距，正好是图片背景图的显示区域 */ text-align: center; /* 这里是让文字居中 */ }
随时随地看视频慕课网APP
Html5
CSS3