I would want to insert a button within an image using CSS; the image has a fixed width and height, centered in the page.
The button must remain stationary within the image at different resolution.
CSS doesn't allow other elements inside an <img> tag. My common go-to in this situation is put both your image and button inside two wrapper <div> elements that act like a table (vertically and horizontally centered). Like so;
HTML
<div class="wrapper">
<div>
<img src="[your image src]">
<a class="button" href="[go to page]">Button</a>
</div>
</div>
CSS
.wrapper{
display: table;
width: 100%; /* Add or remove this depending on your layout */
}
.wrapper > div{
display: table-cell;
vertical-align: middle;
text-align: center;
}
As long as the image has no size constraints this should sit flush in the center of the image :). Enjoy!
EDIT ---
Alternatively, remove the <img> tag and put it as a background-image of .wrapper and use background-size: cover; to center it :). Then you can control the height and width of the image really easily.
Remember to use vendor prefixes too. I have a handy list of them here although they are in Sass.
in your CSS:
myImage {
background-image:url('image.jpg');
background-size:cover;
}
be sure to give your button an ID
in your HTML
<button id='myImage' type='submit'> </button>
To put the button in the position where you want it, simply give it some margins:
.wrapper button {
margin-left:81%; margin-top:3%;
}
But I believe you want the div with the background image to never be larger than the window, right? In that case, you will need some more CSS: set a max-width and a max-height on the div, and then you will also need to set both html and body to a fixed width and height, otherwise max-width and max-height won't know what they ought to be relative to.
So, that's
html, body {width:100%; height:100%; margin:0; padding:0;}
.wrapper {
(..)
margin:0 auto;
max-width:100%; max-height:100%;
}
See updated fiddle.
Related
I want to make the button always aligns vertically on the middle of the image responsively. I can make the image responsive using .img-responsive, however I can't make the arrow to be always on the middle of the image. I suspect the issue is because I can't make the height of the arrow's div to be equal the height of the image. Any way to do so?
Here is my jsFiddle..
PS: for those who can come up with better words please change the title.. ^^
CSS only solution. Using the display table and table-cell combo, you can achieve what you are looking for. I had never really tried it before, as far as I know, but searched around a bit and found a solution which gave me a good starting point to achieve what I needed.
The trick is to have a container which will possess the display table property. Inside that wrapper, you will have all your other elements, which will possess the table-cell property, in order to have them behave properly and stack themselves next to each other, as table-cell would to do.
By giving your table-cells a 100% height, they will adapt themselves to the height of the wrapper, giving you the chance to use the handy little table property going by the name: vertical align. Use the middle vertical align property to center perfectly your nav buttons.
Give your image the max-width 100% property for proper responsive behavior. But don't use bootstrap's own image responsive class because it contains css properties we don't want and that messes up our layout.
I reworked the html a bit, so that each element align perfectly, in the correct order.
WORKING EXAMPLE JSFIDDLE
HTML:
<div class="row">
<div class="col-xs-12">
<div class="image-container">
<div class="prev-btn nav-btn"> < </div>
<div class="inner-container">
<img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" class="center-block">
</div>
<div class="next-btn nav-btn"> > </div>
</div>
</div>
</div>
CSS:
.image-container{
display:table;
height: 100%;
text-align:center;
}
.inner-container{
display:table-cell;
width: 100%;
height: 100%;
padding: 0 15px;
vertical-align: middle;
text-align: center;
}
.inner-container img{
width: 100%;
height: auto;
max-width: 100%;
}
.nav-btn{
font-size:50px;
font-weight:700;
font-family: monospace;
color: #000;
cursor:pointer;
}
.nav-btn:hover{
color: #B6B6B6;
}
.prev-btn{
position: relative;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.next-btn{
position: relative;
height: 100%;
display: table-cell;
vertical-align: middle;
}
Here's a simple solution in Javascript/Jquery. The trick is to adjust the position of each NAV buttons according to the height of the image each time the browser id resized. Dividing the image height by 2 will get you the center of the image, aka the position where you will want your buttons to be. Using only this value will no be enough, you also need to get the center value of your nav buttons. Substracting each values will give you the real position value for your buttons. The ScreenResize function will then update the position each time the image is scaled responsively.
$(function(){
//Call On Resize event on load
screenResize();
//Bind On Resize event to window
window.onresize = screenResize;
});
function screenResize() {
//Adjust Nav buttons position according to image height
$('.nav_btn').css({
'top': (($('.center-block').height() / 2)-($('.nav_btn').height() / 2))
});
}
Also, change the line-height of your buttons to this, it will help:
.nav_btn p{
line-height: 1.25;
}
Finally, use Media-Queries to change buttons font-size and line-height if necessary. Also, like user Valentin said, using images for the nav buttons could also be easier, you wouldn't have to use media-queries.
Example JSFIDDLE
JSFiddle link -Code
I have wasted an hour on this stupid problem. I have made projects and it worked. I deleted that code in rage.
I wanted to center an image but there was a heading above the image. So, i wrapped them in a div and gave them a id[x].
What i tried #x - margin:0 auto width:50%; margin:auto; width:50%; margin: 0 auto; width:50%; margin-left:auto; margin-right:auto; and changing positions to relative.
What worked [not wrapped in a div] -
img {
display:block;
height: 200px;
width: 200px;
margin: auto;
}
h1 {
color:blue;
text-align:center;
}
But this code had a problem as the image is clickable, the whole width of where the image was became clickable, i don't know why.
You cannot have a block element inside an inline element. The anchor that the image would be wrapped in is an inline element. When you turn the child into a block element it will make the anchor take the entire width of the line, because you don't have a width setting on the anchor.
To fix this issue, display:block; should be display:inline-block;
Use text-align: center to center the image.
#test {
text-align: center;
}
img {
display: inline-block;
height: 200px;
width: 200px;
}
h1 {
color:blue;
}
<div id="test">
<h1>Hi, I am guy!</h1>
<a href="#">
<img src="//lorempixel.com/200/200">
</a>
</div>
if I understand your problem you want to both center the header and image that are wrapped in a div. You do not want the entire area of the div clickable just the image. Below is a fiddle.
If the above is correct it seems you just need to add the a tag around the img tag and not the div itself.
<div>
<h1>Header</h1>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200" />
</div>
https://jsfiddle.net/gward90/7s45osxa/
UPDATE:
display: block will take up the width of the parent element everytime, as others have said use inline-block.
Only apply size to the img tag, and apply display to the a tag. The wrapper class with text-align: center is actually taking care of centering the img as well.
Here is the updated fiddle:
https://jsfiddle.net/gward90/7s45osxa/3/
Here is also your fiddle updated with my suggestions
https://jsfiddle.net/gward90/aLxecdk6/5/
The page I'm working on has a responsive view.
Products are listed on the page and the product listing scales with the page width.
I want to position the product image in the centre of it's container so that the image takes up the width and size of it's container AND is always centred with the image centre in the centre of .product
<div class='product'>
<div class="image_wrapper">
<a href="/products/1">
<img scr="http://awesome.image.com/1.jpg">
</a>
</div>
</div>
since the page is responsive, the content width and height are variable
Can anybody advise?
Update
I've created this fiddle to better explain the problem:
As the screen size gets smaller, the image should remain positioned in the centre, with the tower staying centred. The black shading on the edges should slip out of view if the image is wider than it's container
http://jsfiddle.net/gavinmorrice/aUL29/
Here is the solution my friend :)
.product {
width: auto;
margin: auto;
}
#image_wrapper {
width: 100%;
display: table;
background-image:url("http://drinkdeals-1-asia.s3.amazonaws.com/development/venues/9a6f8955a3ab7670217425cb50c171ea/wide_venue.jpg");
height:300px;
background-position:center;
background-repeat:no-repeat;
}
Change your CSS to the above and then remove the image tag from your HTML and CSS :)
have you tried using
.image_wrapper img{
min-width:100%;
}
hope it helps
you image_wrapper div has to get the css as follows:
.image-wrapper {
display: table;
width: 100%;
}
the img element has to get following code and it will be rendered completly in the middle
img {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Also in this Blogpost you will find further information about centering elements horizontal and vertical.
Here is example: [http://jsfiddle.net/9X6zD/2/][x]
Parent must have position:relative, and element margin:auto; and display: block;
[demo][1]
I am trying to move from old html styled with tables, to html5 styled with CSS, but I have problems:
codepen Demo
You can see that, text is aligned to the edge of the page, and I want it aligned to the edge of the header banner.
I cant figure out, how to do that? without using tables.
Also, please note, that the .article:nth-child(odd) CSS selector, somehow aligns the odd elements to the left, and not to the right... I dont understand why.
Thanks!
The best way to create a fixed width website is to add a containing div:
Simply add a fixed width div around all your current code.
#Wrap{width:1024px;}
.
<body>
<div id="Wrap">
...
/* rest of website */
...
</div>
</body>
codepen Demo
CLEAN EXAMPLE
HTML
<div id="Wrap">
<div id="Head"></div>
<div id="Body"></div>
<div id="Foot"></div>
</div>
CSS
#Wrap{
width:1024px; /*Your desired page width*/
margin:0 auto; /*Center your wrapper on the page*/
}
#Head{
width:100%; /*Fill the width of the wrapper*/
}
#Body{
width:100%; /*Fill the width of the wrapper*/
}
#Foot{
width:100%; /*Fill the width of the wrapper*/
}
For example
codepen Demo
.article {
width: 1024px;
}
To center the .articles you need to set a width. Also you might want to consider getting rid of
<div align="center">
It's deprecated in html5
Your content have the same width as a header, but you have image inside header which have a little less width than 100% of site, so what u need to do is add some width for article something like this:
.article {
display: block;
margin: auto;
width: 900px;
}
codepen Demo
you need to write css to style the page correctly:
codepen Demo
div {
text-align: center;
}
I always wondered if this was possible without JS.
This is one of those situations where you can see that there is still a gap between devolpers and designers, hope we can help close it here :)
Here is a great explanation of how to do it (but for elements smaller than the container only)
http://css-tricks.com/centering-in-the-unknown/
//HTML
<div class="something-semantic">
<img class="something-else-semantic" src="wtvr"></img>
</div>
//CSS
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Best solution I've used as of late is half-hack, half-awesome.
<div class="something-semantic" style="background-image: url( {{src}} )">
<img class="something-else-semantic" src="{{src}}" />
</div>
//CSS
.something-semantic {
position:relative; /* or something other than static */
background-repeat:no-repeat;
background-size:contain;
background-position:center center;
}
.something-semantic img{
width:100%;
height:100%;
opacity:0;
}
So for an image gallery, I'd inject the image src into inline background-image property and the <img> src attribute.
Making the REAL image completely transparent (but still visible), allows for alt tags, title, etc. Using background property lets you constrain the image dimensions to whatever size container you'd like.
the images top and left corners will always be flush with the container div, unless you know the size of the image and can give it ax explicit negative margin.
example fiddle http://jsfiddle.net/rHUhQ/
depending on the situation you can just give the image a class that styles it how you want since apparently it's container isnt that important (if it can be covered by the image in the first place).