how center vertical bootstrap button?

Question

I want center vertical bootstrap button on an image , I do it like this :

http://jsfiddle.net/fhd031hf/

I use margin-top:-200px , is that true or there are another better way ?

Please see my answer below. Using the method i have provided it will be responsive and it will not mess up the design when going to a smaller resolution. — Matthew, Nov 30 '15 at 18:59
Thank you dear , I don't know how I handle it when images loaded from database :/ @Matthew — shima amini, Nov 30 '15 at 19:05

score 1 · Answer 1 · answered Nov 30 '15 at 18:40

Your approach as you see will work but instead you could/should use position relative and absolute stylings. They are more intuitive when somebody else or yourself has to look at the code some time later again.

To achieve your desired results you have to add position: relative to the containing div and position: absolute; top: 200px; to the button.

<div style="position: relative">
  <img style="width:100% ; height:400px;" class="center-block img-responsive" src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg" />
  <button style="position: absolute; top: 200px" type="button" class="btn btn-default ">TitleText</button>
</div>

http://jsfiddle.net/fhd031hf/2/

Edit: Seeing that you are using a responsive class for the image please take in consideration that both appproaches will break the design when the screen solution is smaller than the original image.

thank you dear , yes as you said , it works fine now but when I shrink the browser it shows a little bad . thank you again :) @Felix — shima amini, Nov 30 '15 at 18:52

score 1 · Answer 2 · answered Nov 30 '15 at 18:49

1

a couple of things I noticed about your fiddle:

1.) you were not resourcing bootstrap correctly. you had the .css file resourced but you were missing the .js file.

2.) your div structure in no way indicated that you were using bootstrap. Bootstrap has classes that you must attribute to your divs in order for bootstrap to work properly. Here is a getting started link for using bootstrap. Bootstrap Getting Started.

Check out this fiddle I have made for you. Instead of using an html img tag I am using a div with a background-image. Setting that div to a relative position and the button inside that div to an absolute position, it allows the button to stay exactly in the center of the image no matter what the screen resolution.

The only downside to this is you need to specify a height for the button. Other than that I uses this method all the time and it hasn't given me any issues.

jsfiddle

    .center-block.img-responsive {
        background: url('http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg') no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        position: relative;
        height: 500px;
    }
    .btn.btn-default {
        position: absolute;
        width: 100px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 40px;
        margin: auto;
    }

answered Nov 30 '15 at 18:49

Matthew

922
1
6
21

thank you , yes I'm new in bootstrap . thank you for your code but My image loaded from database , and I have a lot of images @Matthew – shima amini Nov 30 '15 at 19:01
so you don't have control of how the image is loaded on the page? – Matthew Nov 30 '15 at 19:05
No , I control it with `src="@Url.Content(item.GoodImage.ToString())"` and it works correctly , but I don't know how change it to background image in div – shima amini Nov 30 '15 at 19:13
Is that javascript you are using to set the src? – Matthew Nov 30 '15 at 19:28
I came across another question of yours which told me that you are using ASP MVC5. I did some research into that and it may be complicated or not useful to you i found this other post showing how to use `@Url.Content()` directly in css. [here](http://stackoverflow.com/questions/12351418/mvc-cannot-display-image-using-background-url-in-css-uses-bundling). edit: sorry i could not be more help. I wish you good luck in your project. – Matthew Nov 30 '15 at 19:54
No , I used asp.net mvc5 with razor engine and it is Razor syntax – shima amini Nov 30 '15 at 20:02
Thank you very much dear :) , you helped me a lot . a little of my problem solved . – shima amini Nov 30 '15 at 20:06

how center vertical bootstrap button?

2 Answers2