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/
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>
I have a bunch of images in a row that I want to align with bootstrap glyphicons in the same row. So far, the glyphicons are much higher than the images, and I can't figure out why. The only margin I changed was left-right. The elements are nested inside a row. I am using reset.css, animate.css and bootstrap.
I can't figure out, how to make the glyphicons align with the images. Edit: they are nested inside divs to add angular classes and functions. Any help appreciated.
html:
<div class="row carousel-thumbnails">
<div class="col-xs-12">
<div><span class="glyphicon glyphicon-chevron-left"></span></div>
<img class="carousel-img-thumbnail" src="http://vignette1.wikia.nocookie.net/swordcoaststories/images/5/5f/Placeholder.jpg/revision/latest?cb=20141201040635" alt="thumbnail">
<img class="carousel-img-thumbnail" src="http://vignette1.wikia.nocookie.net/swordcoaststories/images/5/5f/Placeholder.jpg/revision/latest?cb=20141201040635" alt="thumbnail">
<img class="carousel-img-thumbnail" src="http://vignette1.wikia.nocookie.net/swordcoaststories/images/5/5f/Placeholder.jpg/revision/latest?cb=20141201040635" alt="thumbnail">
<img class="carousel-img-thumbnail" src="http://vignette1.wikia.nocookie.net/swordcoaststories/images/5/5f/Placeholder.jpg/revision/latest?cb=20141201040635" alt="thumbnail">
<div><span class="glyphicon glyphicon-chevron-right"></span></div>
</div>
</div>
css:
.webpage {
margin-top: 2em;
}
.link-list {
text-align: center;
}
.link-icon {
display: inline-block;
}
.link-image {
height: 3em;
width: 3em;
border-radius: 120px;
margin: 0 1em;
}
.thumbnail {
text-align: center;
}
.carousel-thumbnails {
text-align: center;
}
.carousel-thumbnails img {
width: 6em;
height: 6em;
margin: 0 0.5em;
}
.carousel-thumbnails div {
display: inline-block;
}
.carousel-thumbnails div span{
font-size: 5em;
}
.active {
border: 0.1em solid red;
}
Codepen link if you wanna fiddle :). Thanks for the help.
Its really simple
.carousel-thumbnails div span{
vertical-align: middle;
}
Add this in your style.
EDIT: As #Druzion said, the icons are vertical-aligned to the top of containing div by defualt. we need to give vertical-align: middle inorder to place them vertically center.
You can give
.glyphicon{ vertical-align: middle}
Both do the same trick
Here is the updated CODEPEN
All the images are vertical-align: middle, however the icons do not have this rule, so they are vertical-align to the top of the containing div.
Add vertical-align: middle to your divs containing the icons to line them all up
CODEPEN
add this to your images carousel class: margin-bottom: 4em;
I'm really struggling to achieve clean code whilst trying to get the layout I want.
My current code isn't behaving with other floating divs on the page and the bottom section with text and buttons are not displaying inline and are forcing other elements out of position.
JSFiddle: http://jsfiddle.net/XXe4L/
I've tried various rehashings of my code but can't figure it out and am at the point where I'm starting to pull my hair out.
I'm trying to acheive a layout similar to this wireframe - https://wireframe.cc/UTHU1d.
I've copied my latest code below, minus the bottom div with text and button because I've not been able to get that anywhere near right.
CSS:
.sceneItem { clear:both; display: block; margin: 0 auto; width: 100%; }
.scenePart { display: block; width: 100%; height: 360px; float: left; }
.imgLink { margin: 0; position: relative; }
.largeImage { display: block; width: 648px; height: 360px; float: left; }
.previewImage { width: 318px; height: 180px; display: block; margin-bottom: 3px; float: left; }
.previewImage a.imgLink { }
.img { display: inline; }
and HTML:
<li class="sceneItem">
<div class="largeImage scenePart">
<a href="" class="imgLink" title="">
<img src="24361_01_01.jpg" class="img" alt=""></a>
</div>
<div class="previewImage scenePart">
<a href="" class="imgLink" title="">
<img src="24361_01_01.jpg" class="img" alt=""></a>
</div>
<div class="previewImage scenePart">
<a href="" class="imgLink" title="">
<img src="24361_01_02.jpg" class="img" alt=""></a>
</div>
</li>
I am guessing that if your floats are interfering with each other, you might try creating a block formatting context for your floated images as follows:
.box {
width:970px;
overflow: auto;
}
By doing this, any elements following will not interact with the floated images.
Note: Without the additional page elements, I can't say for sure what the problem is.
I put three HTML-elements in a row using inline-block: 2 images linking to external websites (green boxes in the image below) and one div-tag with a search-form an a language selection.
The problem is now, that next to the images - on their right sides - there is also a hidden link. To make it visible I set text-decoration:underline and a blue background in active mode (see image).
How can I limit the a href to only the images?
HTML code looks like that:
<div id="logo">
<a href="http://website1.example">
<img src="image1.gif">
</a>
<a href="http://website2.example">
<img src="image2.gif">
</a>
<div id="headermodules">
<form class="search" method="post" action="index.php">
<input type="text" value="Suchen...">
</form>
<div id="languageselection">
<ul class="languageselection">
<li id="active_language">
Deutsch
</li>
<li>
<a href="http://localhost:81/en/">English
</li>
</ul>
</div>
</div>
<span style="width: 100%;"></span>
</div>
The CSS looks like that:
#logo
{
position: relative;
height:129px;
text-align: justify;
z-index: 0;
border-top: 0px solid #000;
}
#logo img
{
display: inline-block;
vertical-align: middle;
}
#logo span
{
width: 100%;
height: 0;
display: inline-block;
}
#headermodules
{
display: inline-block;
vertical-align: middle;
}
You should have the a elements styled to inline-block and not the img. The img should be display: block. I think that should do it.
#logo a { display: inline-block; }
#logo img { display: block; }
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