I have a little problem with my css, I can't align an image with a text input field. The site is live at http://jocolina.com/picemon/pokelocator.php
The CSS I have for the text input and image is:
#loginUTC{
width:30%;
height: 60px;
font-family: Verdana;
font-size: 30px;
text-align:center;
font-weight: bold;
/*margin: 0 auto;*/
border-color: #336688;
}
#magniIMG{
display: inline;
height: 60px;
cursor: pointer;
}
#locator{
margin: 0 auto;
text-align:center;
height:60px;
}
Where loginUTC is the text input, magniIMG is the image I want to algin with the input, and locator is the div in which both of the elements are.
You can set both elements to vertical-align: bottom;.
#loginUTC{
vertical-align: bottom;
}
#magniIMG{
vertical-align: bottom;
}
You can use margin-bottom in negative at image that will fix it
#magniIMG {
display: inline;
cursor: pointer;
height: 60px;
margin-bottom: -18px;
}
You could use floats to align the form elements with images like you are trying to achieve here. You'll also need to add some widths to the containing element and the input to align everything. Try -
#locator {
margin: 0 auto;
text-align: center;
height: 60px;
width: 545px;
}
#loginUTC {
height: 60px;
font-family: Verdana;
font-size: 30px;
text-align: center;
font-weight: bold;
/* margin: 0 auto; */
border-color: #336688;
float: left;
}
#magniIMG {
/* display: inline; */
height: 60px;
cursor: pointer;
float: left;
}
Related
I have the following simple code snippet. It is taken out from my application where .a1 is a container button, which has an icon. The icon should be vertically middle aligned to the parents line-height/height, but it is shifted with 1px from top. Could you explain me why this is the behavior? Is there any solution?
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
Why?
Because inline-block elements render with "white-space". You can see this in this demo where no height/width is set on the parent element.
When you use vertical-align:middle; the "white space" is rendered before the element (on top) (black line in the demo). This space moves the child element down and therefore it doesn't appear verticaly centered.
how to fix :
You can use display:block; and calculate the margin to apply to the child element so it centers verticaly and horzontaly.
You can also take a look at this question which talks about white space and ways to avoid them.
Well, it seems like font-size:0; for .a1 seems also a fix for such issue.
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
font-size: 0;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00
I am trying to center the flame and the heading to the middle of the white box.
HTML
<div class="contentheading">
<div class="floatmiddle">
<img src="images/flame45x45.png">
<h3>Receive only the email you want.</h3>
</div>
</div>
CSS
.contentheading {
position: relative;
height: 45px;
margin-top: 30px;
width: 636px; //this is the full width of the white box//
}
.floatmiddle {
margin: 0 auto;
height: 45px;
display: block;
}
.contentheading img {
position: absolute;
}
.floatmiddle > h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
height: 45px;
line-height: 45px;
margin: 0 0 0 60px;
text-align: center;
vertical-align: top;
position: absolute;
}
I need the .float middle to inherit the width of the two enclosing elements - the image (45 x 45px) and the text (which will be different length for each chapter i have) so i need one class/formula so i can just go through and pop in the headings and no matter the headings length the heading and the fireball will be centered within the white div.
You can use display: inline-block; to center this div.
http://jsfiddle.net/d8gyd9gu/
HTML
<div class="contentheading">
<div class="floatmiddle">
<img src="http://www.neatimage.com/im/lin_logo.gif" alt="">
<h3>Receive only the email you want.</h3>
</div>
</div>
CSS
.contentheading {
height: 45px;
margin-top: 30px;
width: 636px;
text-align: center;
}
.floatmiddle {
height: 45px;
display: inline-block;
}
.contentheading img {
float: left;
margin: 20px 10px 0px 0px;
}
.floatmiddle > h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
height: 45px;
line-height: 45px;
padding: 0px 0px 0px 60px;
}
If you can use flexbox you can do it really simply like this:
.contentheading {
border: 1px dashed #ff0000;
margin-top: 30px;
width: 636px;
display: flex;
justify-content: center;
align-items: center;
}
.contentheading h3 {
font-family: "signika";
font-size: 22px;
font-weight: 500;
color: #37434f;
}
<div class="contentheading">
<img src="images/flame45x45.png" width="45" height="45" />
<h3>Receive only the email you want.</h3>
</div>
If you need to support older browsers make sure you add the prefixed versions.
You can definitely pare your markup and styling down. If you only need to center the text and the image in a div of a fixed width, you can simply use text-align: center on the parent container, and display: inline-block on the two elements within. The following markup and styling is about as little as you need:
HTML
<div class="content-heading">
<img src="images/flame45x45.png">
<h3>Receive only the email you want.</h3>
</div>
CSS
.content-heading {
background-color: #ccc;
height: 45px;
margin: 0 auto; /** Centers on the page **/
text-align: center;
width: 636px;
}
h3 {
display: inline-block;
line-height: 45px; /** Only really works if you can rely on only displaying one line of text **/
margin: 0;
overflow: hidden; /** Need this to keep inline-block elements from staggering **/
padding: 0;
}
img {
background-color: black; /** Purely so we can see this **/
display: inline-block;
height: 45px;
width: 45px;
}
That's really all you need.
Codepen sketch
as you can see on this JSFiddle and on picture below, I'm struggling to get the signature placed as I want in my banner (I want it at the bottom right of the blue banner without interfering with the quote text alignment). The issue that I have is that with my current code the second line of the text is not perfectly aligned horizontally to the middle of the block (there's more space to the right than to the left).
How could I fix this and have full control on the signature position?
Many thanks,
HTML:
<div class="block blueback center">
<h2 class="white">dfjdsjdklj dsjfdslfjldsjf ldsjfdlsjflkdsfjdlskjf dljfdslfjkldsj dljfsdljfdklsj lkdjflkdsjdlks dsfjsdlkfjkls dsjflkdsfjdkl</h2><p class="signature">John Dupont</p>
</div>
CSS:
.block {
display: block;
margin-right: auto;
margin-left: auto;
clear: both;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
width: 100%;
overflow: hidden;
}
h2 {
color: #2165CB;
font-weight: 600;
font-size: 18px;
}
.white { color: #fff;
letter-spacing: 1px;
font-style: italic;
font-weight: 300;
display: inline;
}
.center {
vertical-align: middle;
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
}
.signature {
display: inline;
margin-top: 20px;
margin-bottom: 0px;
padding-top: 0px;
font-size: 12px;
color: #fff;
float: right;
font-weight: 700;
}
.blueback {
background: #0064C4;
}
They're interfering with each other because they're both set to be inline display. Floating the signature to the right starts on the same line as the quote. Thus the float ends up reducing the amount of width the quote perceives that it has, and a visually off-center center is the result.
I am not sure why inline is necessary. You could leave them both as block display and then align the quote's text to the right.
CSS:
.white {
color: #fff;
letter-spacing: 1px;
font-style: italic;
font-weight: 300;
padding: 0;
margin: 0;
}
.signature {
font-size: 12px;
color: #fff;
text-align: right;
font-weight: 700;
padding: 0;
margin: 0;
}
JSFiddle adjustment
If you compare it with yours, it looks visually the same (except the quote text is now centered).
You can use negative margins:
.signature{
margin-right: -20px;
}
But I would move the padding from the outer div to be margins of inner h2 and used margin-left on class signature:
.block {
display: block;
margin-right: auto;
margin-left: auto;
clear: both;
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
h2 {
color: #2165CB;
font-weight: 600;
font-size: 18px;
margin-left: 20px;
margin-right: 20px;
}
.signature{
margin-left: <put here>
}
You also need to define float: left; for your white class as you have defined float: right; for your .signature and other things you can manage such as margins and paddings.
demo
I have the following css:
#header-notification
{
color: #7B6F60;
font-size: 13px;
font-weight: bold;
float: left;
text-align: center;
vertical-align: middle;
height: 20px;
width: 20px;
background-color: #E5E5E5;
}
and declared the label as:
<label id="header-notification"></label>
However doing so gives me the following:
As you can see the text here is not vertically centered. What am I doing wrong?
As you are using a single character to align it vertically, you can use line-height property here to vertically align in the middle of the element
Demo
#header-notification {
color: #7B6F60;
font-size: 13px;
font-weight: bold;
float: left;
text-align: center;
vertical-align: middle;
height: 20px;
width: 20px;
background-color: #E5E5E5;
line-height: 20px;
}
For making vertical-align: middle; work, you need to use display: table-cell; so that it will align middle vertically.. but you won't need that here as I specified that you are trying to align a single character. display: table-cell; method is generally used when you want to align an entire paragraph or an image vertically inside an element.
Give this a spin: http://jsfiddle.net/jplahn/7zwUc/
You need to place it inside a parent div. (If you want to use vertical-align on it. Obviously there's other ways to do it).
HTML:
<div id="header-notification">
<label id="number">0</label>
<div>
CSS:
#header-notification
{
color: #7B6F60;
font-size: 13px;
font-weight: bold;
float: left;
text-align: center;
height: 20px;
width: 20px;
background-color: #E5E5E5;
}
#number {
vertical-align: middle;
}
Try to add display: table-cell for element:
#header-notification
{
display: table-cell;
color: #7B6F60;
font-size: 13px;
font-weight: bold;
float: left;
text-align: center;
vertical-align: middle;
height: 20px;
width: 20px;
background-color: #E5E5E5;
}
I'm still new in CSS, sorry for the long post. I have the following code
<style type="text/css">
.btn {
float: left;
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
}
.btn a{
float: left;
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
</style>
</head>
<body>
<div class="btn btn_addtocart">Add to Cart<span></span></div>
<div class="btn btn_checkout">Check Out<span></span></div>
</body>
</html>
I'm trying to center each button in the middle of the page (horizontal alignment), how can I accomplish that? I tried playing with the padding and the margin but it messes my background image.
Here is jsFiddle
try margin auto, text-align center, fixed width for middle part..
oh ..and get rid of the float, and dont forget the ';'
edit code..
.btn {
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
display: block;
margin: 5px auto;
text-align: center;
width: 120px;
}
.btn a {
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 0 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
width: 10px;
height: 40px;
}
.btn_addtocart { background-color: green; }
.btn_checkout { background-color: red; }
You can text-align:center the links inside the divs (which are block-level elements) to center them inside their containers but you will have to make a couple of tweaks. Try this:
.btn {
clear: both;
background: url(images/btn_left.png) no-repeat;
padding: 0 0 0 10px;
margin: 5px 0;
text-align:center;
}
.btn a {
height: 40px;
background: url(images/btn_stretch.png) repeat-x left top;
line-height: 40px;
padding: 10px;
color: #fff;
font-size: 1em;
text-decoration: none;
}
.btn span {
background: url(images/btn_right.png) no-repeat;
float: left;
width: 10px;
height: 40px;
display: block;
}
.btn_addtocart a { background-color: green; }
.btn_checkout a { background-color: red; }
Demo
http://jsfiddle.net/andresilich/UtXYY/1/
A couple things you can do
.btn {
display: block
margin-left: auto;
margin-right: auto;
}
By default a button is an inline element, so margins will no work. Setting display to block, will make it act like a
div.btnParent {
text-align:center
}
The other method is to have the button's containing element text-align center. The may not necessarily always work, as there may be more content in this container that you do not want to be centered.
I can't fully see from your code snippet but to centre somthing in the middle of its parent, you need to set its margin to auto.
margin: auto
and its width
width: 100px:
EDIT:
Also remove any float: styles you have on the element.