I'm trying to make these icons with just CSS (except for the white icon). The problem I'm running into is that if my icon's name exceeds the width and starts wrapping the text starts overlapping the image (as it is shifted upwards, as seen on the second element), what I need to have the text do is shift downwards (as shown on the third element).
Here is my html:
<div class=circle><label>Manage Queries</label></div>
And here is my CSS:
.circle
{
float:left;
position:relative;
border-radius: 50%;
width: 128px;
height: 128px;
background: #C70C11 url('myimage.png') no-repeat center center;
}
.circle > label
{
font-family:arial;
position: absolute;
bottom: -20px;
text-align:center;
width:inherit;
}
I have tried vertical-align but I haven't found any success with it.
Instead of bottom:-20px, try top:100%
Here is a proof of concept: http://jsfiddle.net/eZcRk/
Just set the top property of the label to the height of the div
.circle > label
{
top: 128px;
}
DEMO
To get vertical-align to work, you need to set the parent tag to have display: table. Then you set the tag with these properties:
display: table-cell;
vertical-align: bottom;
Tried setting vertical-algin:bottom; and display:inline; for your label ?
Related
I made a menu with links that have "list bullets", reacting to hover, like this.
Each item is wrapped by a span, and use :after to create the bullets.
The bullets are vertically aligned to the bottom of the text, and I want them to be centered.
However, trying to center it by using vertical-align: middle; (and any other means I could manage to find) results in this this (inspecting it shows the text is properly centered on the container) and I can't seem to find any way to get it properly centered.
Here is the fiddle.
Can you try if this code does what you need:
%linkBase {
$fontSize: 40px;
line-height:40px;
font-size: $fontSize;
position:relative;
&::after {
$bulletHeight: $fontSize * 0.8;
content: '';
display: inline-block;
width: 2px;
height: 40px;
background-color: black;
top:50%;
position:absolute;
margin-top:-20px;
}
}
.link {
#extend %linkBase;
}
.linkCentered {
#extend %linkBase;
}
The idea is that you set the original link to be relative, then set the "after"element to be absolutely positioned. Then you set the "top" of that element to 50%, which pushes it half way down, then you pull it back up with a margin-top of half its height.
This is a common method of centering items.
I've made a span composed of an image and text, using the following HTML code. And I'm trying to align that text next to the image, using the following css class:
span.my-profile {
background-image: url('http://placehold.it/450x100/fc6');
background-position: left center;
background-repeat: no-repeat;
padding-left: 16px; /* Or size of icon + spacing */
text-align: center;
}
<span class="my-profile">My Full Name</span>
However, That didn't work as expected. And the text is still aligned to left as the image. So what's wrong with my code? and how is it possible to align the text to the center?
Thanks in advance.
Adding the background image to the same span with the text will only place the image as the background of the span with text.. try placing the image as a separate element in the span using <img /> tag. You can then control the image and the text using either display:inline-block or float in css.
Use a pseudo-element :before to place the image (change the width, height and margins):
span.my-profile:before {
content: "";
display: block;
background: url('/img/no-face.png') no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0; }
Try to play with some width-height, padding and display:block properties, it will work.
check this fiddle here
Try to use css style like below
span.my-profile{
width:200px;
height:100px;
display:block;
background:url(http://placehold.it/200x100) no-repeat;
padding-top:100px;
text-align:center;
}
This is my HTML:
<div id="mitte"><img id="img_mittig" src="tienda.png" /></div>
And this my css:
#img_mittig{ display: block; margin-left: auto;margin-right: auto;}
The img is center right, but when I try, for example, to move down the image with top: 200px;, it doesn't work. Why ?
You need to add position on your element to be able to use top.
So for example:
#img_mittig { position: relative; top: 200px; }
top:200px will only work with position:absolute or position:relative; or position:fixed
what you are trying to achieve can be achieved using margin-top:200px;
You cant move block element with no positioning with "top, left, right, bottom". Use margins and paddings. For example margin-top: 200px;
If you want move img by setting top: 200px then set position: relative for img.
So I have a "post" box, and that will contain an avatar and the post. The issue is when I add an image the text drops below the image. Here's what I'm talking about
All I want to do is align the picture with the text. Here's my code for the image
cursor: default;
height: 74px;
width: 74px;
border-radius: 50% 50% 50% 50%;
margin-right: 19px;
vertical-align: middle;
margin-top: -19px;
display: inline-block;
And here's a demo. Its not the most complete demo, but it works. Any help would be nice. I'm trying to align the text with the image
You could float your image to the left.
img {
float: left;
}
Have a fiddle!
or you could position absolutely (might be more appropriate).
.post {
position: relative; /*Make absolutely positioned children relative to their .post parents */
}
.post img {
position: absolute;
top: 50%;
margin-top: -37px; /* negative. half of height/*
}
This will keep your image in the center of the post.
Have a second fiddle!
use css:
float:left;
Here is a JSFIddle: http://jsfiddle.net/UWtEF/
hope that helps
I saw your code and if I understand your problem, you want text align on the right of avatar.
Actually you know the avatar size then the most simple solution is first to create context for position, then :
.post{position:relative;/* your other properties here */}
now you have a context, you can add absolute for your avatar like :
#IMG_1{position:absolute;left:0;top:0;/* your other properties here, don't forget to remove margins */}
/* I suggest you to replace #IMG_1 by .post > img{} */
now you need only to add padding-left inside your block content for post then :
.post{padding-left:84px;/* your other properties here and don't forget position:relative; */}
Now you need only to correct others selectors like .message, .likes, .time to remove paddings (padding-left in .post is enough).
I hope this help you.
I am trying to do two things:
Make a text input take all the space in a div. My current approach is left: 0; right: 0; but apparently it's not working.
Put a SVG in a relative position to the conainer div in a way that I can move it just under the text inpit (I'm working on a slider component in SVG).
You can see it in this JsFiddle
Any clues for the positioning? clear: both is of no use to send the SVG to the next line? Can I achieve a relative positioning from the container div element somehow?
UPDATE:
I've found a workaround for my positioning question (2). To use position: relative on the container div and position: absolute on both child elements (an input and a svg). See the updated JsFiddle.
Nevertheless, question (1) remains. How to make the text input fill the whole container div?
Try this to put the SVG on the next line:
.container {
width: 400px;
height: 45px;
background: gray;
}
.textfield {
clear: both;
float:left;
margin-right:100px;
}
.slider {
width: 200px;
height: 15px;
border: 1px solid #741;
}
Re part #1. Why don't you just set your input text field to be the same size as the div?
.textfield {
width: 400px;
height: 45px;
clear: both;
}
http://jsfiddle.net/M8UEv/8/
It also has the effect of moving the SVG under the text field.