在较大的Div内将图像水平对齐CSS中的文本右侧

时间:2015-06-06 11:41:30

标签: html css image alignment

我需要顶部,中部和底部的图像位于这些div中文本的右侧。此刻,即使图像朝右,文字离开,图像也位于段落位置下方。我已经应用了reset.css。

这是相关的HTML和CSS

Index.html摘录:

<Div id="background">

    <div id="Space">
    </div><!--spacing between divs-->

<article id="Top">
    <h2>Flower arrangement</h2>
        <p>Our team of professional designers will make your event memorable and stress free. We will design to your theme, colour, budget and needs with attention to detail given high priority.</p>
        <img src="Images/Top_Image.gif" alt="" width="207" height="195">
        <a href="#" >Read More </a>     
</article>

    <div id="Top_box">
    </div><!--spacing between divs-->

<article id="Middle">
    <h2>Seed Library</h2>
        <p>Don't be afraid to try growing your own plants, you will be surprised how easy seed germination really is. A large variety of native seed mixes are offered, ideal for creating sustainable wildflower gardens.</p>
        <a href="#" >Read More </a>
        <img src="Images/Middle_picture.gif" alt="" width="208" height="216">

</article>

    <div id="Middle_box">
    </div><!--spacing between divs-->

<article id="Review">
    <h2>Ran Dome said:</h2>
        <p>'I have never had such an outstanding experience with such a wonderful group of people who understood my needs'</p>
        <img src="Images/Review_picture.gif" alt="" width="93" height="120">

</article>

<div id="Review_box">
</div><!--spacing between divs-->

<article id="Bottom">
    <h2>Sustainability</h2>
        <p>Belinda Aspect founded Aspect in April 1985 and is a leading expert on green floral design. Belinda's dual passions for floral design and sustainability were merged when she decided that The Aspect would 'go green'.</p>
        <a href="#" >Read More </a>
        <img src="Images/Bottom_picture.gif" alt="" width="208" height="216">
</article>

<div id="Bottom_box">
</div><!--spacing between divs-->

</Div><!--background picture Div-->

style.css extract:

#background {
    background-image: url(Images/background.jpg);
    background-repeat: no-repeat;
    width:100%;
}
#catch_line{
    color: #7f6e99;
    height: 50%px;
    width: 57%;
    margin-left: 6%;
    margin-top:132px;
    background-color: #000000;
    border-radius: 5px;
}
#catch_line h1{
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 3.4em;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    paddingtop: 50px;
    color: #7f6e99;
}
article#Top, article#Review {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    background-color: #7a9c52;
}
article#Middle, article#Bottom {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    background-color: #2d6d18;
}
article#Top h2, article#Middle h2, article#Bottom h2 {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 1.6em;
    color: #0c1306;
    padding-bottom: 2%;
    word-spacing: 2px;
    padding-top: 3%;
    padding-left: 6%;
    margin right: 0px;
}
article#Top p, article#Middle p, article#Bottom p{
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 1em;
    color: #0c1306;
    width: 70%;
    clear: none;
    display:block;
    padding-left: 6%;
    padding-bottom: 2%;
    margin right: 0px;
}
article#Top a, article#Middle a, article#Bottom a {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 0.7em;
    color: #dc3646;
    text-decoration: none;
    clear: none;
    float: left;
    padding-left: 6%;
    margin right: 0px;
}
article#Top img, article#Middle img, article#Bottom img{
    float: right;
    margin-right: 20px;
    clear: none;
    width: 140px;
    height: 140px;
    display:block;
    margin left: 0px;
}
article#Review h2 {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 1.6em;
    color: #0c1306;
    padding-bottom: 2%;
    word-spacing: 2px;
    padding-top: 2.5%;
    text-align: center;
 }
article#Review p {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-style: italic;
    font-size: 1em;
    color: #0c1306;
    text-align:center;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 0.5%;
}
article#Review img{
    margin-left: auto;
    margin-right: auto;
    display:block;
    height: 78px;
    width:62px;
}
#Space, #Top_box, #Middle_box, #Review_box, #Bottom_box{
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    height: 80px;
    clear: both;
}

我也知道我可以改变它,以便文章有边距而去除间距div以获得与我想要的效果相同的效果,但我现在并不关心它。< / p>

0 个答案:

没有答案