So I have a label and a field. But for some reason they don't seem to align. Here's my markup
<span class="hash">#</span>
<input type="text" class="hex" maxlength="6">
And the CSS.
.hex {
width: 385px;
height: 40px;
font-size: 30px;
font-family: 'proxima_novalight';
outline: none;
background: none;
border: 3px solid black;
}
.hash {
font-size: 51px;
font-family: 'proxima_novalight';
}
I want to align the # with the field. I've tried line-height, but that didn't work. Here's a demo
You need to set vertical-align:middle for both the elements:
.hex {
width: 385px;
height: 40px;
font-size: 30px;
font-family: 'proxima_novalight';
outline: none;
background: none;
border: 3px solid black;
vertical-align:middle; /* add this */
}
.hash {
font-size: 51px;
font-family: 'proxima_novalight';
vertical-align:middle; /* add this */
}
Demo
Related
I have been trying for a while now and cant seem to achive the bellow design:
.exploreItem {
background-color: #353258;
/* rgba(31, 31, 31, 1) */
border: 1px solid #4152F1;
color: white;
/* padding: 20px 24px; */
cursor: pointer;
width: 90%;
height: 45px;
/* font-size: 15px;
font: Arial;
font-family: sans-serif;
display: block; */
}
.exploreImg {
/* background-color: lightblue; */
display: inline-block;
vertical-align: top;
height: 30px;
/* width: 10px; */
padding-left: 10px;
}
.exploreLabel {
/* vertical-align: middle; */
/* background-color: grey; */
display: inline-block;
font-size: 15px;
font: Arial;
font-family: sans-serif;
/* width: 10px; */
margin-top: 0px;
}
<div class="exploreItem" id="exploreItem">
<img class="exploreImg" src="images/defaultProfImg.png">
<label class="exploreLabel">Explore</label>
</div>
How can I create the intended design layout? (An image next to the explore label like in the image)
You even don't need the image just use css to do it. And even if you use image you can use display: flex for .exploreItem and align-items: center can do the magic.
I had put down the simpler css only solution here with :before pseudo element.
.exploreItem {
background-color: #353258;
border: 1px solid #4152F1;
color: white;
cursor: pointer;
padding: 16px;
width: 90%;
border-radius: 32px;
}
.exploreLabel {
display: flex;
align-items: center;
font-size: 15px;
font: Arial;
font-family: sans-serif;
margin-top: 0px;
}
.exploreLabel:before {
content: '';
height: 28px;
width:28px;
background-color: #4152F1;
border: 1px solid #a89dff;
display: block;
margin-right: 16px;
border-radius: 50%;
}
<div class="exploreItem" id="exploreItem">
<label class="exploreLabel">Explore</label>
</div>
.wrapper {
width: 200px;
}
.exploreItem {
width: 100%;
display: flex;
background: transparent;
padding: 20px 30px;
border: 1px solid transparent;
border-radius: 50px;
align-items: center;
cursor: pointer;
}
.exploreItem label {
color: #919191;
}
.exploreItem.active {
display: flex;
background: #2F2D50;
border: 1px solid #483EF1;
}
.exploreItem.active label {
color: #ffffff;
}
.exploreItem i {
display: block;
background: #A3A3A3;
border: 1px solid transparent;
width: 25px;
height: 25px;
border-radius: 50px;
margin-right: 10px;
}
.exploreItem.active i {
background: #483EF1;
border: 1px solid #A5A0FF;
}
<div class="wrapper">
<div class="exploreItem active">
<i></i>
<label class="exploreLabel">Explore</label>
</div>
<div class="exploreItem">
<i></i>
<label class="exploreLabel">Explore</label>
</div>
</div>
Use below code:
HTML:
<div class="outer">
<div class="round"></div>
<label>
<span>Explore</span>
</label>
</div>
CSS:
.outer
{
background: #353258;
border: 1.5px solid #4152F1;
color: white;
padding: 7px 8px;
cursor: pointer;
width: 150px;
height:33px;
border-radius: 30px;
cursor: pointer;
}
.round
{
background: #502ffb;
height: 28px;
width: 28px;
display: inline-block;
border: 1px solid white;
border-radius: 50%;
}
label
{
color: white;
display: inline-block;
cursor: pointer;
}
label span
{
position: absolute;
margin-top: -24px;
margin-left: 3px;
font-size: 17px;
}
I want to put text field and button on the same line.
I used display: inline; but it's not working. Where am i making a mistake?
.listBar {
position: absolute;
left: 40px;
top: 210px;
box-sizing: border-box;
}
#input {
width: 100%;
font-size: 16px;
border: none;
background-color: aliceblue;
padding: 14px;
float: left;
}
#add {
color: whitesmoke;
border: none;
background-color: inherit;
padding: 14px 20px;
font-size: 16px;
cursor: pointer;
float: left;
}
#add,
#input {
display: inline;
}
<div class='listBar'>
<h2 class='header' style='margin:5px'> List </h2>
<input type='text' id='input' placeholder="Title">
<button id='add'> Add </button>
</div>
it's because you have width: 100% on the input. It makes it take all the place and there is none left for your button. It will work if you remove the width there or set it to auto. Also, be careful with the second float, that one should be right, not left.
.listBar{
position: absolute;
left: 40px;
top: 210px;
box-sizing: border-box;}
#input{
font-size: 16px;
border: none;
background-color: aliceblue;
padding: 14px;
float: left;}
#add{
color: whitesmoke;
border: none;
background-color: inherit;
padding: 14px 20px;
font-size: 16px;
cursor: pointer;
float: right;}
#add, #input{
display: inline;}
You don't need the floats to do that, your input has a width of 100% that's why display inline didn't work, And the h2 is also block by default so you need to set it's display to inline or inline-block as well
.listBar {
position: absolute;
left: 40px;
top: 210px;
box-sizing: border-box;
}
#input {
font-size: 16px;
border: none;
background-color: aliceblue;
padding: 14px;
}
#add {
color: black;
border: none;
background-color: lightgrey;
padding: 14px 20px;
font-size: 16px;
cursor: pointer;
}
#add, #input {
display: inline;
}
<div class='listBar'>
<h2 class='header' style='margin:5px'> List </h2>
<input type='text' id='input' placeholder="Title">
<button id='add'> Add </button>
It was right that if the input text field takes 100% of the parent's width, there will be no room for the button. In addition, there is no need of display: inline. You can put the text field and a button in the same line just by adding the float: left in both elements classes and by increasing the width of the main div class element :) .....
.listBar{
position: absolute;
left: 40px;
top: 210px;
width: 30%;
box-sizing: border-box;
}
.header {
color: whitesmoke;
text-align: left;
}
/* add button */
#add{
color: whitesmoke;
border: none;
background-color: inherit;
padding: 14px 20px;
font-size: 16px;
cursor: pointer;
float: left;
}
#add:hover{
background-color: rgb(85, 78, 78);
}
/* input text field */
#input{
width: 75%;
font-size: 16px;
border: none;
background-color: aliceblue;
padding: 14px;
float: left;
}
here is snippet
The problem here is that input takes width: 100%; of its parent. So there is no more room for a button on its side.
Here is a working snippet with comments:
(That's how I'll do to correct the problem if it was for myself)
body { /* Added only for snippet */
background: #ddd;
}
.listBar {
position: absolute;
background: #bbb; /* Added only for snippet */
left: 40px;
top: 20px; /* Modified only for snippet */
box-sizing: border-box;
}
#input {
width: auto; /* Modified, you could also simply remove this line */
font-size: 16px;
border: none;
background-color: aliceblue;
padding: 14px;
float: left;
}
#add {
color: whitesmoke;
border: none;
background-color: inherit;
padding: 14px 20px;
font-size: 16px;
cursor: pointer;
float: right; /* Floating on the right */
}
<div class='listBar'>
<h2 class='header' style='margin:5px'> List </h2>
<input type='text' id='input' placeholder="Title">
<button id='add'> Add </button>
</div>
Second proposal after comments:
(That's not what I'll do, but that's funny anyway!)
You could play with the transform property to move the element:
body {
background-color: #ddd; /* Added only for snippet */
}
.listBar {
position: absolute;
background: #bbb; /* Added only for snippet */
left: 40px;
top: 20px; /* Modified only for snippet */
box-sizing: border-box;
}
#input {
width: 100%;
font-size: 16px;
border: none;
background-color: aliceblue;
padding: 14px;
float: left;
}
#add {
color: whitesmoke;
border: none;
background-color: inherit;
padding: 14px 20px;
font-size: 16px;
cursor: pointer;
float: right; /* Floating on the right */
transform: translate(100%, -50%); /* Added with funny values, just for demo. Waiting for your answer to my comment. :) */
}
<div class='listBar'>
<h2 class='header' style='margin:5px'> List </h2>
<input type='text' id='input' placeholder="Title">
<button id='add'> Add </button>
</div>
Note that currently, because of the padding of the input, the input goes outside of its parent.
You may want to correct that.
Documentation about transform: https://www.w3schools.com/css/css3_2dtransforms.asp
When using translate() with percentages, it takes a percentage of the size of the element.
It's quite handy.
Hope it helps.
Put a wrapper around the input and button and than use display: flex;
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Did this help?
.listBar {
position: absolute;
left: 40px;
box-sizing: border-box;
}
.listBar__forms {
display: flex;
}
#input {
width: 100%;
font-size: 16px;
border: none;
background-color: aliceblue;
padding: 14px;
}
#add {
color: whitesmoke;
border: none;
background-color: inherit;
padding: 14px 20px;
font-size: 16px;
cursor: pointer;
}
<div class='listBar'>
<h2 class='header' style='margin:5px'> List </h2>
<div class="listBar__forms">
<input type='text' id='input' placeholder="Title">
<button id='add'> Add </button>
</div>
</div>
* {
margin: 0;
padding: 0;
}
.box {
width: 230px;
border: 1px solid red;
}
input {
width: 30px;
line-height: 20px;
background: #e5e5e5;
border: 0;
text-align: center;
padding: 0 5px;
font-size: 14px;
}
span {
padding: 0 2px;
cursor: pointer;
line-height: 20px;
font-size: 14px;
display: inline-block;
}
<div class="box">
<span>xx</span>
<input type="text" value="322xxx">
I want to know why there is 1px space between bottom of span and bottom of outdiv? can someone help me out?
You need to set vertical-align:top for the display: inline-block span tag
*{
margin: 0;
padding: 0;
}
.box{
width: 230px;
border:1px solid red;
}
input{
width: 30px;
line-height: 20px;
background: #e5e5e5;
border: 0;
text-align: center;
padding: 0 5px;
font-size: 14px;
}
span{
padding: 0 2px;
cursor: pointer;
line-height:20px;
font-size: 14px;
display: inline-block;
vertical-align: top;
}
<div class="box">
<span>xx</span>
<input type="text" value="322xxx">
By default, a span element is an inline level element, which respects the whitespace in the markup. Thats the reason a small space between the input and span. Thanks..
I want to style a <button> and <a> element both into the same format. I use the following code:
button,
a {
border: solid 1px black;
background-color: white;
color: black;
font-family: 'Arial';
padding: 0 15px;
font-size: 13px;
height: 35px;
line-height: 35px;
display: inline-block;
}
#dummy-block {
background-color: black;
padding: 0;
margin: 0;
height: 20px;
}
<div id="dummy-block"></div>
<button>My Button</button>
<a>My Link</a>
But the <button> element seems to ignore the height and my <a> element does not touch the edge of the black dummy <div> above:
You can test the code in my fiddle: http://jsfiddle.net/gyrrcrqc/1/
Try this:-
button, a {
background-color: white;
border: medium none;
box-shadow: 0 0 1px #000 inset;
color: black;
display: inline-block;
font-family: "Arial";
font-size: 13px;
height: 35px;
line-height: 35px;
padding: 0 15px;
vertical-align: top;
}
Or:-
button, a {
background-color: white;
border: medium none;
vertical-align:top;
color: black;
display: inline-block;
font-family: "Arial";
font-size: 13px;
height: 35px;
line-height: 35px;
padding: 0 15px;
border:1px solid #000;
box-sizing:border-box
}
DEMO2
DEMO
Apparently the default box-sizing method for button is border-box while that for inline-block is content-box. So:
35px height means the <a> is actually 37px tall (border adds 2px)
35px height means the <button> tag is 35px tall (35px includes the border)
Set the box-sizing: border-box on both elements.
button,
a {
border: solid 1px black;
background-color: white;
color: black;
font-family: 'Arial';
padding: 0 15px;
font-size: 13px;
height: 35px;
line-height: 35px;
display: inline-block;
box-sizing: border-box;
}
#dummy-block {
background-color: black;
padding: 0;
margin: 0;
height: 20px;
}
<div id="dummy-block"></div>
<button>My Button</button>
<a>My Link</a>
try adding vertical-align: bottom to button, a selector
button, a
{
border: solid 1px black;
background-color: white;
color: black;
font-family: 'Arial';
padding: 0 15px;
font-size: 13px;
height: 35px;
line-height: 35px;
display: inline-block;
vertical-align: top;
}
#dummy-block
{
background-color: black;
padding: 0;
margin: 0;
height: 20px;
}
<div id="dummy-block"></div>
<button>Okay</button>
<a>Edit</a>
a
{
padding:1px 15px;
}
button,a
{
border: solid 1px black;
background-color: white;
color: black;
font-family: 'Arial';
font-size: 13px;
height: 35px;
line-height: 35px;
display: inline-block;
}
button
{
padding: 0 15px;
}
I'm trying to make a login form with block icons before the input fields.
#import url(http://meyerweb.com/eric/tools/css/reset/reset.css);
#import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
#login {
margin: 50px auto;
width: 300px;
background: #999;
padding: 50px;
}
#login p {
line-height: 50px;
}
#login p span {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
padding: 3px;
text-align: center;
border: 1px solid #ccc;
background: #ccc;
color: #fff;
}
#login p input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding: 3px;
width: 200px;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
background: #fdfdfd;
}
html
<div id="login">
<p><span class="fontawesome-user"></span><input type="text" placeholder="Username"></p>
<p><span class="fontawesome-lock"></span><input type="password" placeholder="Password"></p>
</div>
Unfortunately, I can not precisely align the block (span) icon with the input field. How could I do this? thanks
Example
You need to vertical-align the inline-block elements, eg :
#login p > * {
vertical-align:middle;
}
Forked Fiddle