CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sikander
Sikander

Reputation: 2835

Html :Adjusting alignment of heading and <p>

i have very simple scenario but i am really stuck with it and need your help please .

this is what i have to do . enter image description here

This is a div with righ and bottom border and and image in its top . I have to display text same as this one . For this i am using bootstrap like this 

<div class="span4" >

      <h1 class="BoldText">
        <a href="#">GET  A QUOTE</a>
      </h1>
      <span class="SimpleText">
         INSERT TEXT HEREINSERT TEXT HEREIN-SERT TEXT HEREINSERT TEXT HEREINSER
       </span>

</div>

now problem is that i have to show it in middle of box , if i set margin-left to h1 and <span> tag this is how it looks like this padding also does not work here . will someone guide me how do i adjust it . it seems simple but i am really unable to get it .

Upvotes: 0

Views: 51

Answers (3)

chloelonan
chloelonan

Reputation: 136

So, if you're not particularly attached to using bootstrap, doing this in pure html and css is relatively simple and usually a whole lot easier to read than the bootstrap spit-out code. I have made a fiddle with an example: http://jsfiddle.net/6aJJ5/1/. Hope that helps!

Upvotes: 1

Satwik Nadkarny
Satwik Nadkarny

Reputation: 5133

You will need to set up your CSS as such:

#img {
    background:transparent url('http://thebuzzdoha.com/wp-content/uploads/2014/06/fifa-world-cup-wallpaper-hd.jpg') top center no-repeat;
    height:200px;
    width:100%;
    margin:0 0 20px 0;
}

.span4 {
    border:1px dotted Black;
    margin:0 auto;
    width:400px;
    text-align:center;
}

.span4 a {
    color:Black;
    text-decoration: none;
    font-family: sans-serif;
}

.SimpleText {
    display:inline-block;
    margin:0 auto;
    width:70%;
    text-align:justify;
}

You can see this here->http://jsfiddle.net/5KjXq/

Hope this helps!!!

Upvotes: 1

sinisake
sinisake

Reputation: 11338

I would set widths: http://jsfiddle.net/4YUtW/

.span4 {
    width:300px;
    border:1px solid #666;
}

h1 {
    width:226px;
    display:block;
    margin:0 auto;



}
.SimpleText {
    width:226px;
    display:block;
text-align:justify;
    margin:0 auto;

}

but, there are probably better solutions... Of course, you will have to change values to fit your needs.

Upvotes: 1

Related Questions