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
Related
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>
Need help centering these images in CSS
I have been trying to center them by using a div id tag
<div id="centerLeftAboutPic">
<div class="single-about-detail clearfix">
<div class="about-img">
<img src="img/AttyRLev.jpg" alt="">
</div>
<div class="about-details">
<div class="pentagon-text">
<h1>R</h1>
</div>
<h3>Atty Rob Lev</h3>
<p>Click here to learn more about robert lev</p>
</div>
</div>
</div>
I also created a separate div ID for the second picture. Here is the CSS for one of the images. Both images have similar css.
#centerLeftAboutPic {
float: right;
width: 320px;
padding-left: 30px;
position: relative;
}
I am new to web developing so I am still confused on positioning. Thank you.
You can use the below in your css
text-align:center
snippet
#centerLeftAboutPic {
text-align:center;
padding-left:30px;
position: relative;
border:solid black;
}
img{
width:50px;
height:50px;
margin-left:70px;
}
<div id="centerLeftAboutPic">
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<img class="img-responsive" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRH181kjqkxFXqYU4bTP8zdfiAfO4iceJrxA4lMPXMCKY61eX9v" /></a>
<div>
</div>
If you want to center the image relative to its container then all you need to do is add this to its CSS.
#centerLeftAboutPic img {
margin-left: auto;
margin-right: auto;
display: block;
}
However it's only going to center it within the 320px container you gave it in #centerLeftAboutPic. If you adjusted that property to width: 100%; it will center it on the page.
Here's a fiddle for you. I set the width to 100% in the example, play around with it and you'll see what I mean: https://jsfiddle.net/v5k8rjy2/2/
If you want to center the entire #centerLeftAboutPic div you'll need to put the margins on the div its self and remove the float: right property. Here's a fiddle of that: https://jsfiddle.net/v5k8rjy2/5/
#centerLeftAboutPic {
width: 320px;
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
}
I checked a few posts here and managed to keep the text align in the middle of my user's icon, the question here is: as you can see if his name is too long it goes to the other line.
I was wondering if theres a way to reajust and keep the whole name in the middle of the icon?
Thanks in advance
here's my html:
<li class="user">
<a href="#"><img class="img-circle online" src="http://placehold.it/50">
<span>Nome do Usuário</span></a>
</li>
and my css:
.chat-list > li.user {
display: inline-table;
height: 50px;
margin-bottom: 5px;
width: 100%;
}
.user span {
display: inline-table;
margin-left: 8px;
width: 69%;
word-break: normal;
}
Try this
HTML:
<li class="user">
<a href="#"><img class="img-circle online" src="http://placehold.it/50">
<span>Nome do Usuário</span></a>
</li>
CSS:
.chat-list > li.user {
height: 50px;
margin-bottom: 5px;
width: 100%;
display:block;
}
.user a {display:table;text-align:left;}
.user a img {display:table-cell;width:50px;}
.user span {
display: table-cell;
margin-left: 8px;
width: 69%;
word-break: normal;
vertical-align:middle;
}
JSFiddle: http://jsfiddle.net/jdfx/La996vye/
TL:DR - Set the parent to display:table, and set the children as display:table-cell then add vertical-align:middle to your span.
I have done something similar on my website and solved it by applying this to the text:
span {
display:table-cell;
vertical-align:middle;
}
For this to work your parent tag needs to be shown as a table so:
a {
display:table;
}
http://jsfiddle.net/gk2dfngc/
I have the following Html Markup in my website:
<div id="header">
<div class="flyoutMenuButtons visible-phone">
<i class="icon-reorder icon-3x"></i>
<i class="icon-reorder icon-3x"></i>
</div>
<div id="logo_and_search">
<a id="logo" href="/" title="abc">
<img src="abc.png" height="40" width="136">
</a>
</div>
</div>
I would like the logo to be diaplayed in center for all device widths.
What style shall I apply to the "#logo" element in order make it display in center for all devices other than desktops and tablets?
use like this:
a#logo{
display: block;
text-align: center;
}
a#logo img{
display: inline-block;
}
something like this but if you give fiddle example it be fine
#logo_and_search {
width:100%;
}
#logo {
display: block;
margin: 0 auto;
}
#logo {
display: block;
width:136px; /* the same as the logo*/
margin: 0 auto;
}
I want to center four links in a div.
This is what I did so far: jsfiddle
Html:
<div id="menu">
<section>
<a class="top" href="#">Top</a>
<a class="left" href="#">Left</a>
<a class="right" href="#">Right</a>
<a class="bottom" href="#">Bottom</a>
</section>
</div>
Css:
#menu {
width: 200px;
height: 200px;
border: 1px solid #000;
background: #eee;
position: relative;
padding: 10px;
}
#menu>section {
position: absolute;
text-align: center;
width: 200px;
}
#menu a {
display: block;
vertical-align: middle;
height: 20px;
}
#menu .left {
float: left;
height: 160px;
}
#menu .right {
float: right;
}
#menu .bottom {
clear: both;
}
The problem is that the floated elements do not vertically centered as they should. I want the left and right elements to be in the middle and not at the top.
May be you can use line-height property for this. Like this:
#menu .left, #menu .right {
height: 160px;
line-height:160px;
}
http://jsfiddle.net/YdPzP/13/
try adding
.left, .right { line-height: 160px; }
Since you are already using html5, I would say aside tag would probably come in handy in your case:
here is a Sample
DEMO
You can use padding for vertically aligning the links
<div id="menu">
<section>
<a class="top" href="#">Top</a>
<div class="middle">
<a class="left" href="#">Left</a>
<a class="right" href="#">Right</a>
</div>
<a class="bottom" href="#">Bottom</a>
</section>
</div>
add the below css:
#menu div.middle{
height:90px;
padding-top:60px;
}
I ran into a seeming conflict between float:left; and vertical-align: middle;
In my case, I wanted several small images to line up horizontally. Some of them were the right size vertically and the others weren't tall enough, so i wanted to line up just those vertically that were the wrong vertical size.
Using a <ul>/<li> structure, I kept float:left; and dispay:inline; and it was ok in FF and IE 7,8,9, but not correct in Chrome and Safari. For some reason, the last image went to the next line even though there was ample room for it.
After eliminating completely float: left; the vertical-align: middle; then worked. Then it was just adding padding to line them up horizontally. Works now in all browsers.
Not sure why there is a conflict between float:left; and vertical-align:middle;
You may want to play with eliminating your float:left;