图片和文字居中、文字和输入框居中

最新推荐文章于 2024-05-31 12:30:47 发布

呆子罗

最新推荐文章于 2024-05-31 12:30:47 发布

阅读量4.2k

点赞数 1

分类专栏： JQuery

本文链接：https://blog.csdn.net/zooen2011/article/details/50522694

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

图片和文字居中、文字和输入框居中

主容器和元素的样式属性都加了vertical-align:middle;

 <style type="text/css">
        .mue-txt{
            width:100%;
            text-align:left;
            margin:0 auto;
            <span style="color:#ff0000;">vertical-align:middle;</span>
            
        }
        .mue-txt p{ margin:10px;}

        .ins{
    padding: 5px;
    height: 30px;
    border: 1px solid #1d1d1d;
    border-radius: 4px 4px 4px 4px;
    font-family: 'Microsoft YaHei';
    width: 200px;
    
    <span style="color:#ff0000;">vertical-align:middle;</span>
        }
        .t-img{ vertical-align:middle;}
        .art_chs{ color:#878787;font-size:10px;}
    </style>

<div class="mue-txt">
      

        <p>
            <input id="txt_phone" name="txt_phone" value="" class="ins" type="text">
            <span class="art_chs"> 输入框和文字</span>
        </p>

        <p>
            <img src="img/1.jpg" class="t-img" /> 图片和文字<br />
        </p>
           
        <p>
            <img src="img/1.jpg" class="t-img" />
            <input id="txt_phone" name="txt_phone" value="" class="ins" type="text"> 图片、输入框、文字
        </p>


</div>

效果如图