CODEWITHSUNDEEP
css
J82
J82

Reputation: 8457

center image and text inside a div

HTML

<div class="leave-comment">
  <a href="example-video-8/" rel="bookmark" title="Leave a comment for Example Video 8"><span class="comment-bubble"></span>Leave a comment for Example Video 8!</a>
</div>

CSS

.leave-comment {
background: #010101;
clear: both;
font-size: 1.4em;
padding: 20px 0;
}

.comment-bubble {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
display: inline-block;
height: 24px;
width: 26px;
float: left;
margin-right: 10px;
  }

Here is the JS Fiddle: http://jsfiddle.net/CeZLy/

I am trying to center both the comment bubble and text inside the black box. The text will always be changing so I can't set a fixed width on the a element. Can someone help me out with this?

NOTE: Sorry if I wasn't clear. I want the comment bubble on the left of the text, and then I want both the comment bubble and the text centered inside the black box.

Upvotes: 4

Views: 17137

Answers (4)

Gustavo Felipe
Gustavo Felipe

Reputation: 19

Define the margin in your text and image like bellow, in my case i use img-fluid by boostrap recomendation for responsivity

     .img-fluid {
        margin: 0% 0% 0% auto;
    }
    
    .banner-title {
        margin: 0% auto 0% 0%;
    }
    <div class="container-fluid bg-banner flex">
        <img src="img/ba.png" class="img-fluid" alt="">
        <div class="banner-title">
            <h1 class="banner-title main-text text-center">
                    <a href="{% url 'vacancies:send_vacancy' %}" class="title-link border rounded
                    text-white p-1 shadow rounded">Connect</a> 
                    with Opportunities

Upvotes: 1

Olaf Dietsche
Olaf Dietsche

Reputation: 74038

From your comments, I would just leave out the float: left and add a text-align: center

JSFiddle

Vertically centering seems a bit difficult. If you want to center vertically and have fixed height, you can set the line-height of your link to the same height.

See JSFiddle

There's a nice tutorial about vertical centering at Vertical Centering With CSS, explaining several methods and emphasizing the pros and cons of each.

Update:

I just reread your comment. Maybe I misunderstood you. If you just want the link moved a bit up or down, you can also use a different padding at the top and bottom.

See this JSFiddle

Upvotes: 1

Madbreaks
Madbreaks

Reputation: 19539

Remove the span. Set the image as the background of the a element. Use text-align:center; and add left-padding for the image:

.leave-comment {
    background: #010101;
    clear: both;
    font-size: 1.4em;
    padding: 20px 0;
    text-align:center;
}

.leave-comment a {
    background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
}

<div class="leave-comment">
    <a href="example-video-8/" rel="bookmark" title="Leave a comment for Example Video 8">Leave a comment for Example Video 8!</a>
</div>

Check it:

http://jsfiddle.net/C9HKr/

Upvotes: 2

Leeish
Leeish

Reputation: 5213

.leave-comment {
background-color: #010101;
 clear: both;
font-size: 1.4em;
padding: 20px 0;
text-align: center;
}
.comment-bubble {
background: url(http://i.imgur.com/iqOtL.png) no-repeat left center;
display: inline-block;
height: 24px;
width: 26px;
margin-right: 10px;
position: relative;
top: 7px;
}

Well you need the span now.

http://jsfiddle.net/CeZLy/7/ in action

Upvotes: 0

Related Questions