html+img左侧文字,html – 使用css将左侧图像与右侧文本对齐

我需要将左侧的图像与右侧的文本对齐.我使用以下css.

body {} #slideshow-nav {

width: 700px;

height: 30px;

position: absolute;

z-index: 999;

bottom: 0;

left: 11px;

text-align: center;

text-decoration: none;

}

#slideshow-nav a {

background: transparent url('../Image/bullet_grey - 1.png') 0 0 no-repeat;

width: 26px;

height: 26px;

text-indent: -999px;

display: inline-block;

text-decoration: none;

margin: 7px;

text-indent: -9999px !important;

margin: 7px;

text-decoration: none;

background-position: center;

border: none;

outline: none;

}

#slideshow-nav a.activeSlide {

background-position: 0 -1000px;

background: transparent url('../Image/bullet_red.png') 0 0 no-repeat;

display: inline-block;

background-position: center;

text-decoration: none;

border: none;

outline: none;

}

.page-slideshow {

position: relative;

margin-bottom: 15px;

text-decoration: none;

background: #d4ecef;

}

.page-slideshow.narrow #slideshow-nav {

width: 460px;

left: 0;

text-decoration: none;

}

.di-hero {

background: transparent;

width: 718px;

height: 300px;

background-position: 11px 0;

background-repeat: no-repeat;

}

p.more {

margin: 8px 0 0 0;

float: right;

overflow: hidden;

color: #BC1E04;

text-decoration: none;

color: #bc1e04;

margin: 5px 0 0 0;

text-align: center;

float: right;

}

h3 {

display: block;

color: #514c44;

font: 18px/24px Georgia,"Times New Roman",Palatino,"Palatino Linotype","Book Antiqua",serif;

margin: 0 0 10px 0;

float: right;

overflow: hidden;

text-decoration: none;

margin: 5px 0 0 0;

text-align: center;

float: right;

}

div.slide-content img {

margin: 0 20px 0 0;

border: 5px solid #5999a2;

}

p {

color: #2e2e2a;

margin: 0 0 10px 0;

float: right;

overflow: hidden;

text-decoration: none;

font: 12px/18px Helvetica,"Lucida Sans","Trebuchet MS",Arial,Verdana,sans-serif;

text-align: center;

float: right;

}

p.more:hover {

text-decoration: underline;

}

.slide-content {

width: 718px;

height: 300px;

background-position: 11px 0;

background-repeat: no-repeat;

}

现在我的图像在左侧,文本在右侧.但它没有正确对齐.我需要在同一行和图像右侧的文本.哪个样式元素缺失..？请帮我.

最佳答案

这是fiddle link

刚刚添加了以下css

.imgDes {

margin-left: 180px;

overflow: hidden;

text-align: left;

}

.imgDes p {

text-align: right;

}

5020b5.jpg" width="152" height="150" alt="DelicIoUs Ideas from AllRecipes.com">

IoUs Ideas from AllRecipes.com

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！