I want to display a button centered inside a div. I did it with the following:
transformation:translateY(25%);
but this is is not allowed for older version of browsers. This is the follwing CSS code for the div and the button:
#buttonSwap.swap{
background: url("../img/thumb_10600.png") no-repeat;
height: 15px;
width: 15px;
border: none;
}
.swapCities{
float: left;
height: 100%;
width: 15px;
margin: 5px 8px 0px 8px;
}
and the HTML code is the following:
<div class="swapCities">
<input type="button" id="buttonSwap" class="swap" ng-click="swapingCities()" />
</div>
There is a lot of methods for vertical alignment in CSS. I recommend reading http://css-tricks.com/centering-css-complete-guide/.
Personally I find the "ghost element" technique (http://codepen.io/KatieK2/pen/ucwgi) most universal. The idea is to prepend an inline-block pseudoelement with 100% height to your container, set your button display to inline-block as well and set vertical-align: middle on both:
.swapCities:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#buttonSwap {
display: inline-block;
vertical-align: middle;
}
You need something like this:
.swapCities{
display: inline-block;/* or table-cell */
vertical-align: middle;
}
Here is a simple example: the key here is that the parent container is position:relative, and the button is position:absolute;
you can use top:50%; left:50%;... this will align the top-left corner of the button to center;
To complete the centering, you need to add margin to the button to equal half of the width and height.
Copy/Paste the below into an .html document, and you will see it at work.
<!DOCTYPE html>
<html>
<body>
<style>
center { background-color:#CCCCCC; position:relative; min-height:600px; }
button { width:300px; height:30px; position:absolute; top:50%; left:50%; margin-left:-150px; margin-top:15px; }
</style>
<center>
<h2>Content Area</h2>
<button type="button">Click Me</button>
</center>
</body>
</html>
You could use position: absolute; then top: 50% property to offset.
Have a look at this Codepen to see if it's any good for you: EXAMPLE HERE
Your css will look like this:
.swapCities{
position: relative;
height: 100px; width: 100px;
margin: 5px 8px 0px 8px;
border: 1px solid;
}
#buttonSwap.swap{
position: absolute;
top: 50%; margin-top: -9px;
left: 50%; margin-left: -9px;
background: url("../img/thumb_10600.png") no-repeat;
height: 15px; width: 15px;
border: 1px solid;
}
Related
I'm coding In order to finally achieve this result(https://pasteboard.co/H2BwMM7.jpg).
The HTML code is this:
<body>
<div>
<div class="box">
<span class="imgBox"><img src="Chrysanthemum.jpg" class="img-rounded" width="150px" height="150px"/></span>
<div class="text">
<h1>mamad</h1>
<h4>author</h4>
</div>
</div>
<div class="well wellBox" role="alert">
<div class="text-body">
<h4>Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
</div>
</div>
</body>
and the css is this:
<style>
div.box {
float:right;
top:25px;
position: relative;
z-index:3;
right:0;
display:inline-block;
margin: 50px;
text-align: center;
line-height: 100px;
font-size:30px;
color:#fff;
}
h1{
margin-top:0px
}
div.box:after,div.wellBox:after {
position: absolute;
content: "";
width: 2px;
height: 50px;
background: black;
top: -20px;
}
div.box:after{
right: -10px;
}
div.wellBox:after{
left: -10px;
}
div.box:before,div.wellBox:before {
position: absolute;
content: "";
height: 2px;
width: 50px;
background: black;
top: -10px;
}
div.box:before{
right: -20px;
}
div.wellBox:before{
left: -20px;
}
.wellBox{
box-shadow: -10px 10px 8px #888888;
}
.imgBox{
box-shadow: -10px 10px 8px #888888; z-index:1; display: inline-block;
float: right;
}
img{float:right; z-index:2;}
.wellBox{
width:80%;
margin:0 auto;
position: relative;
top:146px;
text-align:right
}
.text{
float:right;
display:inline;
text-align:right;
margin-right:30px
}
h1,h4{
color:black}
</style>
The result that I finally got is this url(https://pasteboard.co/H2ByVvW.jpg).
In order to obtain the desired result, I need to:
1.put text of div to class "well" in Where is marked with a green line
2.box-shadow of image put below div to class "well".
3.in mobile size div to class "text" dont have Far away of div to class "text-body".
I tried a lot, but I did not get a good result that really pleases me... Any idea?
I think you can achieve this if you use the correct colors and a transparentized box-shadow instead of a solid color.
Check out this JSFiddle
Specifically see lines 55 & 61
I want the green div to be below the blue div instead of on top of it without changing either of their position values and using pure css only.
http://jsfiddle.net/LpjgLydv/40/
Is this possible?
Assumptions:
I may use inline css only
This is for a footer that needs to stay at the bottom regardless of how much content is on the page
Any other element on the page besides the footer (and html,head,body) may or may not exist at any given time
The footer is nested in <body> and cannot be placed anywhere else
I figured it out. Basically I had to add a relative position and a min-height to the html attribute as well as a margin-bottom to the body attribute:
http://jsfiddle.net/LpjgLydv/44/
html
<html>
<head>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
css
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 250px;
}
.box
{
border: solid 10px blue;
position: relative;
height:900px;
width:380px;
margin-top: 5px;
margin-left: 8px;
}
.box2
{
border: solid 10px green;
position: absolute;
bottom:0px;
left:8px;
height: 180px;
width: 380px;
}
It now meets the criteria of all of the assumptions in the question.
You can use this without positioning.
.inner-box
{
border: solid 10px blue;
height:900px;
width:380px;
margin-top: 5px;
float:left;
}
.inner-box2
{
border: solid 10px green;
float:left;
bottom:0px;
height: 180px;
width: 380px;
clear:both;
}
I'm trying to position a close icon from bootstraps sprite, in the top right side of the image ( not the box). I took this from a working example, but it wont work for me. It always ends up outside the box and at the right corner of the screen.
How can I get this right? I've setup a fiddle, but could not figure how to get the sprite in there. Can you help?
Fiddle
<!DOCTYPE HTML>
<html>
<head>
<link media="screen" type="text/css" href="icons.css" rel="stylesheet">
<title>Delete Image Icon Dev</title>
<style>
img.thumbnail {
background: none repeat scroll 0 0 #FFFFFF;
}
.image:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.image {
-moz-box-sizing: border-box;
border: 1px solid #DDDDDD;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
float: left;
height: 150px;
margin-bottom: 10px;
padding: 10px;
}
.image img {
vertical-align: middle;
}
.delete {
position:absolute;
top:0;
right:0;
}
</style>
</head>
<body>
<div class="image"><img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg"><i class="icon-remove blue delete"></i></div>
</body>
</html>
This example can take an image of any height.
Turn the <i class="delete"> into a <div>
Wrap the <img> with the new delete div
Give .image:before a min-height: 150px; and remove the fixed height on .image
Apply position: relative to .delete
Apply the delete button to a pseudo elment with .delete:after or place another <i> to make it interactive.
Have an example!
Example without the delete pseudo element
HTML
<div class="image">
<div class="icon-remove blue delete">
<img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg">
<!-- <i class="delete-button"></i> if you need to use a real element -->
</div>
</div>
CSS
.image:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
min-height: 150px;
}
.image {
-moz-box-sizing: border-box;
border: 1px solid #DDDDDD;
float: left;
margin-bottom: 10px;
padding: 10px;
}
.delete {
position: relative;
vertical-align: middle;
display: inline-block;
}
.delete:after {
content: '';
position:absolute;
top:0;
right:0;
height: 20px;
width: 20px;
background: #F00;
}
/* If you need to use a real element remove .delete:after and use this --
.delete .delete-button {
content: '';
position:absolute;
top:0;
right:0;
height: 20px;
width: 20px;
background: #F00;
}*/
You need to set position:relative; to the .image div and then set the top and right parameters to the .delete element.
.image {
/* Other rules here */
position:relative;
}
.delete {
/* Other rules here */
position:absolute;
top:30px;
right:15px;
}
Here is a jsfiddle also: http://jsfiddle.net/eugbrqwc/15/. I added some text to the .delete element just to make it visible.
/e
you need to update your markup:
<div class="image">
<div class="img">
<img class="thumbnail" src="http://i.imgur.com/dsPfaSjs.jpg" />
<i class="icon-remove blue delete"></i>
</div>
</div>
and also your css:
img.thumbnail {
background: none repeat scroll 0 0 #FFFFFF;
}
.image:before {
content:"";
display: inline-block;
vertical-align: middle;
}
.image {
-moz-box-sizing: border-box;
border: 1px solid #DDDDDD;
float: left;
height: 150px;
margin-bottom: 10px;
padding: 10px;
vertical-align: middle;
}
.image .img {
display: block;
vertical-align: middle;
position: relative;
}
.delete {
position:absolute;
top:0;
right:0;
width: 10px;
height: 10px;
background: red;
}
Example: http://jsfiddle.net/eugbrqwc/17/
you don't need the height, width and background in .delete - just for showing purposes
Add a wrapper <div> around your image and icon, set it to display: inline-block and position: relative. Its size will conform to the image's, while allowing the icon to absolutely position itself to the top right.
Hi I created a fork of your fiddle and I have solved it. http://jsfiddle.net/bkx1dnsb/1/
You needed Position:relative on the image class
There was no icon so i added an X but your icon will be in the same spot.
Use the top & right from the delete class to tinker the positioning.
The reason it was going to the top right was because position absolute is relative to the browser window. Unless you set position releative on the parent of the absolute positioned element.
Hope that helps
I have 3 buttons, which shall have width according to the width of the button text. This only works with display: inline, but I don't want to have the buttons in a line. How can I list the buttons from top to bottom?
js fiddle
CSS
.wrap{
width: 400px;
height: 100px;
background: red;
}
.button{
display:inline;
background: white;
padding: 0.1rem;
}
HTML
<div class="wrap">
<div class="button">one</div>
<div class="button">two</div>
<div class="button">three</div>
</div>
An easy way is by using floats. Remove the display rule and add:
clear:left;
float:left;
jsFiddle example
.button{
clear:left;
float:left;
background: white;
padding: 0.1rem;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
You only need clear and float left, and remove display on .button.
Then your code stay well:
CSS
.wrap
{
width: 400px;
height: 100px;
background: red;
}
.button
{
clear:left;
float:left;
background: white;
padding: 0.1rem;
}
HTML
<div class="wrap">
<div class="button">one</div>
<div class="button">two</div>
<div class="button">three</div>
</div>
If this is not what you need, let me know
Try:
.button:after{
content: "";
display: block;
}
Demo: http://jsfiddle.net/DerekL/gNkKx/
I am trying to push up the text in a div by 50%, and I tried
padding-bottom: 50px; /*div is 100px high*/
But it does not work.
padding-top: -50px;
This does not work too. Any work-around?
line-height:0px; pushes it up some, but I don't know how much and it's apparently not 50px as you want.
You can wrap the element in another container and position it like so:
HTML
<div class="container">
<div class="block">龍</div>
</div>
CSS (only showing modifications from your style)
.container{
position: relative;
}
.block {
position: absolute;
top: -50px;
}
DEMO
IF you are trying to center the text within the boxes, try the following:
div.block {
border: 1px solid black;
width: 100px;
height: 100px;
text-align: center;
font-size: 80px;
line-height: 80px;
overflow: hidden;
padding-top: 10px;
}
*{
box-sizing: border-box;
}
Try raising the text up with inline-block. Use a border to see where you are. By doing this you can see where margin-top can be adjusted up and how large it is.
<div style='display:inline-block;margin-top:-30px; border: 1px solid pink;'>
<font style='color:green;'>today </font>
</div>