I want to create a white hover caption that is centered vertical and horizontal. Around that i would like to add the same padding/margin and within some padding/margin with the title/caption centered, horizontal and vertical.
Because everything is responsive i think is best to use % for the most of the elements. Maybe the structure of the thumbnail/caption (html) needs to be written differently, i'm a bit stuck now.
In the example image i added some red marks what i mean.
Example:
---> FIDDLE
<div class="col-4">
<a class="thumb" href="#">
<img src="http://fakeimg.pl/500x330/ccc/">
<div class="caption"><span>Project title centered vertical and horizontal</span></div>
</a>
</div>
One option can be the use of inline-block on the span element to vertical algin, and for the space use padding and box-sizing on caption. Check this:
.caption {
position: absolute;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
background-color: white;
text-align: center;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
box-sizing:border-box;
padding:5px;
}
.caption span {
display: inline-block;
opacity: 0;
vertical-align:middle;
color: #111;
text-transform: uppercase;
letter-spacing: 1px;
background-color: white;
}
.caption:before {
content:" ";
height:100%;
width:0;
display:inline-block;
vertical-align:middle;
}
DemoFiddle
Check this fiddle.
Display the parent as a table-cell and use vertical align to center everything
.block {
background-color: #eee;
min-height: 200px;
display: table-cell;
vertical-align: center;
text-align: center;
}
.block-contents {
background-color: #fff;
padding: 20px;
margin: 20px;
}
You could always position the span absolutely too.
.caption span {
display: block;
position: absolute;
top:50%;
left:50%;
width:100%;
transform: translate(-50%, -50%);
color: #111;
text-transform: uppercase;
letter-spacing: 1px;
background-color: white;
}
JSfiddle Demo
Related
I'm working on an alternate display for a presentation program that replaces an HTML div with the text of the slide.
I want to have the bottom of the text aligned to a certain point, so that it has the same bottom point regardless of the number of lines.
I have now put that div inside another (id="wrapper") in order to get it to align at the bottom. The screen will always be 1920x1080. I've used the following CSS:
#wrapper {
height: 1040px;
}
#currentslide {
display: inline-block;
background-color: rgba(0,0,0,0.8);
color: white;
text-align: center;
line-height: 1;
font-size: 32px;
padding: 10px;
vertical-align: bottom;
position: absolute;
left: 50%;
transform: translate(-50%);
}
<div id="currentslide"></div>
The inline-block is to give a background that changes with the text width, but I think it's interfering with my placement.
Thanks for any help!
Figured it out. I used:
#wrapper {
height: 1080px;
}
#currentslide {
display: inline-block;
background-color: rgba(0,0,0,0.8);
color: white;
text-align: center;
line-height: 1;
font-size: 32px;
padding: 10px;
position:absolute;
bottom: 40px;
left: 50%;
transform: translate(-50%);
}
Here is a snippet of my Project Code:
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
input, button {
font-family: 'Montserrat', sans-serif;
}
.img_main_container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn_sign_up, .btn_login:hover {
background: #5d8ffc;
color: #fff;
border: 1px solid #5d8ffc;
border-radius: 5px;
display: block;
width: 300px;
height: 40px;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
.btn_login, .btn_sign_up:hover {
background-color: Transparent;
background-repeat:no-repeat;
color: #ffffff;
border-radius: 5px;
display: block;
width: 300px;
height: 40px;
cursor:pointer;
overflow: hidden;
outline:none;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
<!DOCTYPE html>
<html>
<body>
<div class="img_main_container">
<img src="https://natgeo.imgix.net/subjects/headers/ND%20header%20(1).jpg?auto=compress,format&w=1920&h=960&fit=crop" alt="Storm" style="width:100%;">
<div class="centered">
<button class="btn_sign_up">Sign up</button>
<button class="btn_login">Login</button>
</div>
</div>
</body>
</html>
Everything works as you can see. But I want that the two buttons are side by side like this in that image here:
I tried so many examples but nothing worked. And I still can't figure out what's wrong here. It would be great if anyone could help. Thanks in advance. :)
Since you are using display:block on your buttons (.btn_sign_up, .btn_login), you can't make two buttons side by side, because block covering whole horizontal section.
Instead of this use display:inline-block and you will have buttons side by side.
More information you can get on the W3Schools
Flexbox would be a good solution for this. Add display: flex to the .centered class. This will place direct children of .centered side by side.
.centered {
display: flex;
}
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Use Flexbox for this issue.This is the better solution. Add display: flex to the .centered class.
.centered { display: flex; align-items: center}
How can I vertically align icon inserted using :before method?
Here is what I have:
<div class="button submit">
<a class="submit check_car_search" href="#" >Some Text</a>
</div>
CSS:
.button a{
background: none;
background-color: #32BBE7;
text-indent:1px;
color:#FFF;
text-decoration: none;
display: table-cell;
vertical-align:middle;
text-align:center;
height: auto;
padding: 10px;
border-radius: 3px;
font-weight: 600;
font-size: 50px;
font-style: italic;
}
.button a:hover{
background-color: #2597F0;
}
.button a:before {
content:url(http://i.stack.imgur.com/tKsDb.png);
position: relative
}
JSFiddle: https://jsfiddle.net/1z83tc1o/
How Can I align vertically icon relative to the text?
You can use background and set is size (width, height), Then you can use vertical-align.
CSS
.button a:before {
position: relative;
display: inline-block;
width: 18px;
height: 16px;
vertical-align: middle;
content:"";
background: transparent url(http://i.stack.imgur.com/tKsDb.png) no-repeat center center;
margin-right: 20px; // Optional
}
DEMO HERE
You use background and absolute position the icon to perfectly vertical align in the middle.
.button a:before {
content: " ";
background-image: url(http://i.stack.imgur.com/tKsDb.png);
position: absolute;
width: 18px;
height: 16px;
top: 50%;
margin: -8px 0 0 -25px;
}
Here is the example : https://jsfiddle.net/1z83tc1o/3/
I have a button link which I want to align center, horizontally. Here is the code of button-
HTML:
<button class="downloadButton">Download</button>
Now, I want to align this in center, please suggest a possible CSS for the same, you can find this fiddle at JS Fiddle
P.S. :- I don't want to use <center> tag
Working FIDDLE Demo
Why use button inside an a. You can use just a. And make text-align of parent to center.
<div class="center">
Download
</div>
And the CSS of parent:
.center { text-align: center; }
And set a padding for the link:
.downloadButton { padding: 7px 20px 8px 20px; }
Try this:
body{ /* or parent element */
text-align: center;
}
a{
/* wraps this element according to width of the child element.(here) */
display: inline-block;
}
Working Fiddle
Here you are:
http://jsfiddle.net/594DY/1/
a {
display: block;
margin: 0 auto;
width: 150px;
}
Use this if you want to align center the whole button along with a tag
a {
width: 150px;
display: block;
margin-left: auto;
margin-right: auto;
}
Or use this if you want align button center inside a tag
a {
width: 100%;
display: block;
text-align: center;
}
Simple way to make a button center:
HTML TAG:
<button class="button" style="vertical-align:middle"><span>Login</span></button>
And use this CSS, adding some optional style:
.button {
display: inline-block;
border-radius: 4px;
background-color: #E80C11;
border: 5px;
border-radius: 15px;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
I'd like to create simple tooltip in CSS3.
Example: http://jsfiddle.net/Cg2SX/
Example HTML (can be changed if necessary):
<div class="icons">
t <span class="tooltip">Twitter</span>
f <span class="tooltip">Facebook</span>
g <span class="tooltip">Google+</span>
</div>
And CSS:
.icons { position: absolute; left: 40px; top: 30px; }
.icons a { text-decoration:none; font-size: 16px; color: #000000; position: relative; margin-right: 70px; border:1px solid red; }
.icons a:hover { text-decoration:none; }
.tooltip { background-color: green; color: #FFFFFF; font-family: Arial,sans-serif; font-size: 10px; padding: 2px 8px; bottom: -20px; position: absolute; }
The problem is - I have no idea how to center tooltips below sharing icons (they will be font icons). It wouldn't be complicated if I knew their width but I don't.
Any ideas appreciated. Is it possible anyway?
You could try doing it like this:
updated fiddle
Using a fixed (big enough) width on the span, setting text-align: center on it & putting the text in a pseudo-element to which you give display: inline-block
HTML:
<div class="icons">
<a href="#">t
<span class="tooltip" data-text='Twitter'></span>
</a>
<a href="#">f
<span class="tooltip" data-text="Facebook"></span>
</a>
<a href="#">g
<span class="tooltip" data-text='Google+'></span>
</a>
</div>
Relevant CSS:
.icons a {
display: inline-block;
position: relative;
margin-right: 70px;
width: 16px;
color: #000;
font-size: 16px;
text-align: center;
text-decoration: none;
}
.tooltip {
position: absolute;
bottom: -20px; left: 8px; /* half the width of link */
margin-left: -35px;
width: 70px;
color: #fff;
font: 10px Arial, sans-serif;
}
.tooltip:after {
display: inline-block;
padding: 2px 8px;
background-color: green;
content: attr(data-text);
}
You could always do something like this demo:
http://jsfiddle.net/Cg2SX/1/
I updated a tags then inside .icons div. Here's what I changed:
.icons a {
display:block;
margin-right:10px /* spacing between a tags - changed from your original code */
float:left;
text-align:center;
width:100px; /* you can change this as needed, but it keeps them all uniform*/
height: 50px; /* Change this to the height of your tallest icon image */
}
Then I update the span.tooltip accordingly, I added this to what you had:
.tooltip {
width:100%;
padding: 2px 0; /* changed the side padding to 0 since width is 100% & it takes the text-align center from the CSS above on the a tag */
display:block; /* Made it a block so the width 100% & centered text would work */
}
This doesn't matter on the exact size of your icon images - they could all be different or the same, but as long as the over a tags are wider and taller than the tallest and widest image, you shouldn't have any problems.
why don't you work with => width:auto;