为了账号安全,请及时绑定邮箱和手机立即绑定

一个div的子div宽是200高是350 里面怎么让图片显示一半 另外一半文字居中!?

/ 猿问

一个div的子div宽是200高是350 里面怎么让图片显示一半 另外一半文字居中!?

weixin_慕勒5354261 2019-10-10 21:01:48

#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自己改变了大小


查看完整描述

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; /* 这里是让文字居中 */
        }


查看完整回答
反对 回复 2019-10-11

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信