图片与文字的对齐方式

html代码:

        <div class="content_con">
                <p><img src="images/land_main05.png" alt=""></p>
                <div class="con">
                    <span class="item">项目名称</span>
                    <span class="item_con">
                        项目说明项目说明项目说明项目说明项目说明项目说明项目说明
                        目说明项目说明项目说明项目说明项目说明项目说明项目说明
                    </span>
                    <span class="item_stats">状态:成功</span>
                    <span class="item_stats cur">进程:<a href="#">1条</a></span>
                </div>
                <div class="con_right">
                    <span class="gongxian">贡献</span>
                    <p>付款5元<span>2015.9.9</span></p>
                    <p>付款3元<span>2015.4.6</span></p>
                </div>
            </div>

  css样式:

.content_con{
    margin:0px 20px;
    padding:10px 0;
    border-bottom:1px solid #e7e7e7;
    float: left;
}
.content_con>p{
    display: inline-block;
    float: left;
}
.content_con>p>img{
    vertical-align: text-top;
}
.con{
    display: inline-block;
    vertical-align: text-top;
    float: left;
    margin:0 20px;
}
.con>span{
    display: block;
    width:390px;
}
.con>.item{
    font-size:16px;
    font-family:"黑体";
    font-weight:700;
    margin-bottom:20px;
}
.con>.item_con{
    font-size:14px;
    font-family:"黑体";
    margin-bottom:20px;
}
.con>.item_stats{
    font-size:12px;
    font-family:"黑体";
}
.cur>a{
    cursor:pointer;
    color:#388ebb;
    text-decoration: none;
}

.con_right{
    float: left;
    width:198px;
    height:150px;
    background-color: #f7f7f7;
}
.con_right .gongxian{
    text-align:center;
    display: inline-block;
    width:198px;
    line-height:40px;
    font-size:16px;
    font-family:"黑体";
    font-weight:bold;
}
.con_right>p{
    padding:10px 0px;
    margin:0 20px;
    border-bottom:1px solid #e7e7e7;
    font-size:14px;
    font-family:"黑体";
}
.con_right>p>span{
    float: right;
}

第二个

html:

<div class="footer">
    <div class="footer_con">
        <img src="images/land_footer01.png" alt="">
        <div>
        <p>热线电话:400-000-6060   官方微信:abcdefg   官方微博:abcdefg</p>
        <p>友情链接:中国老年产业大数据网  |  中国老年产业大数据网  |  中国老年产业大数据网  |  中国老年产业大数据网  |  中国老年产业大数据网</p>
        <p>版权所有:天津市为你实现梦想的网络公司 津ICP备案00000000号</p>
        </div>
    </div>
</div>

css:

.footer{
    border-top:10px solid #ccc;
    border-bottom:1px solid #e7e7e7;
    height:135px;
}
.footer .footer_con{
    width:1200px;
    margin:0 auto;

}
.footer_con>img{
    vertical-align: middle;
    margin:30px 0;
}
.footer_con>div{
    display: inline-block;
    vertical-align: middle;
    overflow: auto;
    font-size:14px;
    font-family:"黑体";
    color:#e7e7e7;
    margin-left:40px;
}

理解:

时间: 2024-08-01 08:34:12

图片与文字的对齐方式的相关文章

par函数的adj 参数- 控制文字的对齐方式

adj 用来控制文字的对齐方式,取值范围为0到1,控制图片中x轴和y轴标签,标题,以及通过text 添加的文字的对齐方式 0表示左对齐,代码示例: par(adj = 0)plot(1:5, 1:5, type = "n", main = "title", xlab = "x", ylab = "y")abline(h = 3, lty = 2)abline(v = 3, lty = 2)text(x = 3, y= 3, l

图片与文字居中对齐css

图片与文字居中对齐css * 方法 1. 给图片和文字元素都设置:`vertival-align:center` * 示例 1. HTML ```html <h3> <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox=&q

图片和文字垂直居中对齐

vertical-align对inline-block最敏感.默认属性是:vertical-align:baseline;

HTML5[8]: 图文混排,图片与文字居中对齐

<img src="image.png"><span>999</span> img { /* ...  */ vertical-align: text-bottom; }

div css 图片和文字上下居中对齐

想要图片和文字水平居中对齐很容易,可今天做这个树的时候,遇到了要将图片上下居中.这下就不知道怎么搞. 拿手册看也看不出所以然来,不同的浏览器对DIV的支持不一个,目前最好的浏览器是Firefox. 这里涉及到两个属性,一个是line-height,另一个是vertical-align.在IE里面,只需要line-height就可以实现这个效果,不过要想在firefox和opea里面也实现这样的效果,必须用到vertical-align,而且这是属性一定要定义在image上面,而不是定义在div上

php给图片添加文字水印方法汇总

在php中要给图片加水印我们需要给php安装GD库了,这里我们不介绍GD库安装,只介绍怎么利用php给图片添加文字水印的4种方法的汇总.有需要的小伙伴可以参考下. 1: 面向过程的编写方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 //指定图片路径 $src = '001.png'; //获取图片信息 $info = getimagesize($src); //获取图片扩展名 $type = image_type_to_ex

css控制图片与文字对齐

文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明:baseline-将支持valign特性的对象的内容与基线对齐sub-垂直对齐文本的下标super-垂直对齐文本的上标top-将支持valign特性的对象的内容与对象顶端对齐text-top-将支持valign特性的对象的文本与对象顶端对齐middle-将支持valign特性的对象的内容与对象中部对齐bottom-将支

图片和文字对齐的方法

文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 方法一. 设置各对象的vertical-align属性,属性说明: baseline-将支持valign特性的对象的内容与基线对齐 sub-垂直对齐文本的下标 super-垂直对齐文本的上标 top-将支持valign特性的对象的内容与对象顶端对齐 text-top-将支持valign特性的对象的文本与对象顶端对齐 middle-将支持valign特性的对象的内容与对象中部

uibutton 使用settitle后如何修改其中文字对齐方式

UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];            btn.frame = CGRectMake(5, self.alertView.lableView.frame.size.height + self.checkBox.frame.size.height + 80.0f, self.localView.frame.size.width - self.localView.frame.size.width