I have a link in a centered button but the problem is that the link is clickable in all of the x axis in the button. I just want the link to be in the button image. An easier way to explain is that the the pointer cursor turns into a hand cursor if it is beside the button. I just want it to turn into a hand cursor if it is on the button. Here is my code.
img.center2 {
display: block;
margin-top: 28px;
margin-left: auto;
margin-right: auto;
}
<img src="Button1.png" class="center2">
It's because your button is a block level element, you need to make it inline-block
img.center2 {
display: inline-block;
margin-top: 28px;
margin-left: auto;
margin-right: auto;
}
div.container {
text-align: center
}
<div class="container">
<img src="Button1.png" class="center2">
</div>
Add
Curosor: hand;
This should make the cursor a hand when it goes over the image.
Here is a way you can put the image inside a "button" made with a div element.
I painted the background red for it to be evident. You can customize it the way you need.
.btnContainer{
width:50px;
height: 30px;
padding: 15px 20px;
background: red;
text-align:center;
}
.btnContainer a{
display:inline-block;
margin:0 auto;
}
<div class="btnContainer">
<img src="Button1.png" class="center2">
</div>
.center img {
display: inline-block;
margin-top: 28px;
margin-left: auto;
margin-right: auto;
}
.center {
text-align: center
}
<div class="center">
<img src="Button1.png">
</div>
Related
What's the best way to align my arrow graphic in the middle and also touching the bottom of the bar above?
Right now it's aligned to the left and there is space between the top bar and the arrow.
See my jsfiddle: http://jsfiddle.net/huskydawgs/Z7dZR/26/
Here's my HTML
<!-- Start Form -->
<div class="wrapper-twocol">
<div class="twocol_row">
<div class="twocol_cell1">
<div class="form-header">Watch Video</div>
<div class="form-arrow"><img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12"></div>
<img src="http://www.real.com/resources/wp-content/uploads/2013/06/stream-video1.jpg" width="386" height="279">
</div>
<div class="twocol_cell2">
<div class="form-header">Watch Video</div>
<div class="form-arrow"><img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12"></div>
<img src="http://www.real.com/resources/wp-content/uploads/2013/06/stream-video1.jpg" width="386" height="279">
</div>
</div>
<!-- End Form -->
Here's my CSS:
/* 2 Column */
.wrapper-twocol {
position:relative;
width:100%;
border: none;
margin: 20px 0 37px 0;
}
.twocol_row {
height:100%;
white-space:nowrap;
}
.twocol_cell1, .twocol_cell2 {
height:100%;
width:47%;
display:inline-block;
white-space:normal;
vertical-align: top;
margin-left: 6%;
}
.twocol_cell1{
margin-left: 0;
}
.form-header {
background:#939598;
margin:0;
padding: 10px 0 10px 0;
color: #fff;
font-family: 'SegoeRegular', Helvetica, Arial, sans-serif;
font-size: 21px;
text-align: center;
}
.form-arrow {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
Change you styling slightly. Your div is the entire width of it's parent so you just need to center align that divs contents.
DEMO http://jsfiddle.net/Z7dZR/27/
.form-arrow {
margin: 0 auto;
text-align: center;
margin-top: -2px;
}
I'd suggest the following solution.
First, wrap arrows within a wrapper-div:
<div class="wrapper arrowWrapper">
<div class="form-arrow">
<img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12">
</div>
</div>
Second, apply following CSS:
.arrowWrapper {
width:209px; /*It's the width of the buttons calculated by the developer tools*/
}
.form-arrow {
margin:-3px auto 0 auto;
width:11px; /*width of the arrow*/
}
You can do it with css only (removing the arrow image and its wrappers from the markup)
using the ::after selector. That's how you will prevent repeating of the tag and the wrappers.
.form-header::after{
content: url('https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif');
position: absolute;
left: 50%;
bottom:-18px;
}
Here is the Demo: http://jsfiddle.net/7H5ea/1/
I've been having an enormous amount of trouble for what I thought would be easy, but it's turning out to be much more difficult than I had anticipated.
I have an image alt="home" that I want to center in my footer, with text underneath it, but margin-left and margin-right: auto don't work, margin: 0 auto doesn't work either. Are there other options to center something?
And for the address, it's being pushed down because the width of the copyright and "home" img have a width the size of the footer. When I try to apply a width percentage to the div containing the home img and the copyright text, it disappears for some reason?
This is the result I want to achieve: http://i.imgur.com/khjrZow.jpg
jsfiddle (with complete html and css): http://jsfiddle.net/A2H3n/
If anyone knows what's going on, and can let me know, that would make me so happy... but really, I've spent 4 hours trying to fix this(I've just started learning CSS). Any help would be appreciated!
Relevant HTML:
<footer>
<div id="sociallinks">
<img class="sociallogo" src="images/facebooklogo.jpg" alt="Facebook">
<img class="sociallogo" src="images/Twitterlogo.jpg" alt="Twitter">
</div>
<div id="logoandtext">
<img id="footerlogo" src="images/blackbeltinverse.png" alt="home">
<p>© Hsien-Jin Martial Arts Studio<p>
</div>
<div id="contactinfo">
<p>7548 Mahogany Rd</p>
<p>Los Angeles, CA 97789</p>
<p>(444) 123-4567 </p>
</div>
</footer>
Relevant CSS:
footer{
overflow: hidden;
display: block;
margin: 0 auto;
color: #FFFFFF;
}
#sociallinks{
float: left;
margin: 0;
display: block;
width: 20%;
height: 100%;
}
.sociallogo{
width: 3em;
height: 3em;
}
#footerlogo {
width: 4em;
height: 4em;
margin: 0 auto;
}
#contactinfo {
line-height: 1.25em;
text-align: right;
}
display:inline-block; may be the answer:
footer{
text-align:center;
}
#sociallinks, #logoandtext, #contactinfo{
display:inline-block;
}
#contactinfo{
float:right;
}
Fiddle : http://jsfiddle.net/bonatoc/PLbae/1/
CSS overwrites are at the very bottom.
You can do it like this
Move the #contactinfo div above the #logoandtext
HTML
<div id="sociallinks">/*Some thing here*/</div>
<div id="contactinfo">/*Some thing here*/</div>
<div id="logoandtext">/*Some thing here*/</div>
CSS
#logoandtext {
margin: 0 140px;
text-align: center;
}
#contactinfo {
float: right
}
when I'm resizing my browser-window the blue buttons go below the logo on the left, on the same line as the text "Welkom Bart" although they are two different layers. I want the text "Welkom Bart" to lower as well, so they are not on the same line. What do I need to add to my css?
html e.g.
<div id="mainmenu">
<div id="logo"><img ... /></div>
<div id="usermenu">Buttons</div>
</div>
<div id="maintitle">
<h2>Welkom Bart</h2>
<hr />
</div>
css
#mainmenu {
height: 100px;
position: relative;
}
#logo {
float: left;
width: 200px;
margin-right: 20px;
}
#usermenu {
float: right;
}
#maintitle {
margin-bottom: 20px;
}
#maintitle hr {
color: #56c2e1;
display: block;
height: 1px;
border: 0;
border-top: 1px solid #56c2e1;
margin: 10px 0;
}
Add clear:both to #maintitle =)
Add overflow:hidden to #mainmenu. This will cause its height to include all floated elements, such as your #usermenu element, allowing flow to continue underneath it.
Use this
<div id="maintitle" style="width:100%">
<h2>Welkom Bart</h2>
<hr />
I'm trying to center the image inside the link:
<a href="URL">
<img class="my_class" src="SRC" />
</a>
The css looks like:
.my_class
{
position:relative;
display: block;
margin-left: auto;
margin-right: auto;
}
My problem is that the link can be pressed on the whole width of the page in the specific height and not only on my image. Also, my application needs to work with both directions: dir:"rtl" and dir:"ltr"
Like this
DEMO
HTML
<a href="URL" class="my_class">
<img src="SRC" />
</a>
CSS
a {
text-align:center;
}
.my_class {
position:relative;
display: block;
margin-left: auto;
margin-right: auto;
}
DEMO1
CSS
iframe, body{
margin:0;
padding:0;
text-align:center;
}
Did you mean like this?
Just put width and height property.
width: 200px; height: 150px; /*Example*/
I'd rather wrap it in a container like so:
<div class="my_class"><img src="src.png" /></div>
The CSS for my_class would remain unchanged.
a {
text-align: center;
}
And remove this :
position:relative;
display: block;
margin-left: auto;
margin-right: auto;
i think lots of padding right and left will solve your problem
like
a{
width:1000px;
background:red;
padding:10px 250px 10px 250px;
}
EXAMPLE
UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?
I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.
The image should be 15% of the width of the container div, with the text using the remaining 85%
The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.
I've tried to work this out but can't seem to do it! Can anyone help?
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
and
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/
The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.
If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.
Vertical-align works:
in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)
inside td or it's CSS default display : display:table-cell;
here jsfiddle #TXChetG updated
Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
Using display:table/* table-cell*/;
http://jsfiddle.net/GCyrillus/hQ6Vw/3/
This should get you close:
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>
Replace the grey background div with your image and the blue with your text.
Check this out
HTML:
<section>
<div id="one"></div>
<div id="two"></div>
</section>
CSS:
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
Is this what you mean?
html
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
css
.container {
clear: both;
}
.images {
width: 15%;
float: left;
vertical-align: text-top;
}
.text {
width: 85%;
float: right;
vertical-align:text-top;
}
Why not just set the #text p display to display: inline or display:block; or use margins to align them?
<div id="quotes">
<div id="picture">
<img src="tom.jpg" />
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.
#quotes {
display:table;
}
#picture {
width: 15%;
display:table-cell;
vertical-align: middle;
}
#text {
display:table-cell;
width:85%;
padding-left: 16%;
}
#picture img {
width: 100%;
}
http://jsfiddle.net/X3WsV/1/