I would like to align my icon elements with the form inputs. This is what I have so far:
jsfiddle
<div class="ctr">
<div class="icon-ctr">
<span class="icon"></span>
</div>
<input type="text" />
</div>
and the css:
.ctr {
font-size: 0;
}
.ctr input {
font-size: 14px;
line-height: 14px;
height: 14px;
width: 100px;
padding: 13px;
border: 1px solid #000;
}
.icon-ctr {
display: inline-block;
height: 16px;
padding: 12px;
border: 1px solid #000;
margin-right: -1px;
}
.icon {
display: inline-block;
height: 16px;
width: 16px;
background-color: #f00;
}
You'll notice that the elements don't align in a straight line as I had hoped. Firstly what property is causing this? And secondly what is the most appropriate way to align the elements in a straight line?
Inline block elements, by default, align to the baseline of the previous element.
All you need to do is vertically align the input to the top of the icon.
.ctr input
{
vertical-align: top;
}
JSFiddle
Use in .icon-ctr add float: left;
.ctr {
font-size: 0;
}
.ctr input {
font-size: 14px;
line-height: 14px;
height: 14px;
width: 100px;
padding: 13px;
border: 1px solid #000;
}
.icon-ctr {
display: inline-block;
float: left;
height: 16px;
padding: 12px;
border: 1px solid #000;
margin-right: -1px;
}
.icon {
display: inline-block;
height: 16px;
width: 16px;
background-color: #f00;
}
<div class="ctr">
<div class="icon-ctr">
<span class="icon"></span>
</div>
<input type="text" />
</div>
Related
Need to make two buttons align a few pixels left and right of the centre
I need div left to be 1px to the left of the centre. And right to be 1px right of it.
Any ideas how?
.btn {
font-family: helvetica;
font-weight: bolder;
padding: 10px;
border-radius: 2px;
color: black;
border: 2px solid black;
background-color: white;
width: 100px;
text-decoration: none;
}
.btn2 {
font-family: helvetica;
font-weight: bolder;
padding: 10px;
border-radius: 2px;
color: white;
border: 2px solid white;
background-color: black;
width: 100px;
text-decoration: none;
}
.divleft {
margin: auto 0;
text-align: left;
}
.divright {
margin: auto 0;
text-align: right;
}
<div class="divleft"> Memento </div>
<div class="divright"> Mori </div>
Use flexbox:
.box {
display: flex;
width: 100%;
}
.left,
.right {
width: 100%;
}
.left {
text-align: right;
margin-right: 10px;
}
a {
font-family: helvetica;
font-weight: bolder;
padding: 10px;
border-radius: 2px;
border: 2px solid black;
width: 100px;
text-decoration: none;
}
.btn {
color: black;
background-color: white;
}
.btn2 {
color: white;
background-color: black;
}
<div class="box">
<div class="left">
Memento
</div>
<div class="right">
Mori
</div>
</div>
Codepen: https://codepen.io/manaskhandelwal1/pen/jOMgpbd
I created a CodePen that shows how to make it work: https://codepen.io/kaireidcasey/pen/rNMXrde
The parent element needs display: flex set on it. The children each need an auto margin on one side. I am sure there are other ways to solve this, as well.
Code snippets:
HTML:
<div class="container">
<div class="divleft">
Memento
</div>
<div class="divright">
Mori
</div>
</div>
CSS:
.btn {
font-family: helvetica;
font-weight: bolder;
padding: 10px;
border-radius: 2px;
color: black;
border: 2px solid black;
background-color: white;
width: 100px;
text-decoration: none;
}
.btn2 {
font-family: helvetica;
font-weight: bolder;
padding: 10px;
border-radius: 2px;
color: white;
border: 2px solid white;
background-color: black;
width: 100px;
text-decoration: none;
}
.divleft {
margin-right: 1px;
margin-left: auto;
}
.divright {
margin-left: 1px;
margin-right: auto;
}
.container {
display: flex;
}
The problem is that the elements are not appearing next to each other as I want them to.
all three elements are already on float left and in the right order but they are still not lining up in the right way.
(so probably, the problem is that some elements are position:absolute or relative while they don't need to. The problem is: you can't change that without disrupting the drop-up menu of #Timer. That)
green_button {
background-color: #027fed;
color: white;
border-radius: 2px;
cursor: pointer;
float: right;
position: relative;
}
.green_button:active {
background-color: #eee;
color: black;
}
.keuze {
position: absolute;
width: 100px;
height: 100px;
float: left
}
#timer {
color: black;
background: #eee;
border: none;
padding-left: 10px;
font-size: 12px;
border-radius: 2px;
float: left;
padding: 12px 12px;
cursor: pointer;
list-style-type: none;
position: Relative;
margin-top: -14px;
width: 80px;
}
#timer:hover {
color: white;
background: #027fed;
}
li {
background-color: #eee;
font-size: inherit;
width: 150px;
position: relative;
float: left;
bottom: 31px;
left: 0;
display: block;
font-size: 12px;
text-decoration: none;
font-family: tahoma;
color: black;
width: 50px;
height: auto;
border: 1px solid #;
border-width: 1px 1px 0 0;
background: #eee;
background-color: rgb(238, 238, 238);
padding-left: 10px;
line-height: 38px;
border-radius: 2px;
height: auto;
line-height: 1em;
padding: 5px 10px;
width: 129px;
margin-bottom: 1px;
margin-left: 431px;
}
li:hover {
cursor: pointer;
background-color: #027fed;
color: white
}
.list {
display: none;
list-style-type: none;
position: absolute !important;
}
.keuze:hover .list {
display: block
}
.messages_compose {
padding: 10px;
margin-bottom: auto;
}
.messages_textarea_container {
display: inline-block;
width: 400px;
margin-left: 10px;
}
.messages_textarea {
border: 3px solid lightgray;
margin-top: 0;
margin-bottom: 10px;
padding: 5px;
width: 400px;
height: 40px;
resize: none;
float: left;
border-radius: 2px;
position: absolute;
}
.button {
border: none;
font-size: 12px;
padding: 12px 12px;
height: 40px text-align: center;
}
<div class="messages_compose">
<div class="vraag">CV</div>
<div class="messages_textarea_container">
<textarea class="messages_textarea"></textarea>
<button class="button green_button">Stuur</button>
<ul class="keuze">
<button id="timer">1 Jaar</button>
<div class="list">
<li id="jaar">jaar</li>
<li id="maand">maand</li>
<li id="week">week</li>
<li id="dag">dag</li>
</div>
</ul>
</div>
<script>
document.getElementById("jaar").onclick = function() {
jaar()
};
document.getElementById("maand").onclick = function() {
maand()
};
document.getElementById("week").onclick = function() {
week()
};
document.getElementById("dag").onclick = function() {
dag()
};
</script>
<script src="../scripten.js"></script>
</div>
If you want them side by side (if width allows), to make things simpler, make sure they are inline elements.
textarea and button are inline elements by default and unsorted-list are block element by default
Inline Elements
Block Elements
So basically, all you need is to change your ul to display: inline-block;
* {
padding: 0;
margin: 0;
vertical-align: text-top;
}
green_button {
background-color: #027fed;
color: white;
border-radius: 2px;
cursor: pointer;
}
.green_button:active {
background-color: #eee;
color: black;
}
.keuze {
display: inline-block; /* added */
width: 100px;
list-style: none;
}
.keuze li {
width: 100%;
}
#timer {
color: black;
background: #eee;
border: none;
padding-left: 10px;
font-size: 12px;
border-radius: 2px;
padding: 12px 12px;
cursor: pointer;
list-style-type: none;
width: 80px;
}
<div class="messages_compose">
<div class="vraag">CV</div>
<div class="messages_textarea_container">
<textarea class="messages_textarea"></textarea>
<button class="button green_button">Stuur</button>
<ul class="keuze">
<button id="timer">1 Jaar</button>
<div class="list">
<li id="jaar">jaar</li>
<li id="maand">maand</li>
<li id="week">week</li>
<li id="dag">dag</li>
</div>
</ul>
</div>
</div>
In addition, I have removed all your float and position from your css which I think as #Temani Afif says, you were just trying fix the issue by adding more to it.
I also have added followings just to make it tidier which is irrelevant to your issue. (That is to remove the default margin, padding and vertical align from all html elements to make it tidier and avoid unexpected behavior of different browsers)
* {
padding: 0;
margin: 0;
vertical-align: text-top;
}
I am new to using svgs in CSS. My goal is to place the svg that I have referenced below (a battery icon) inside of the divs of item class, centered vertically, in the first case to the left of the bullet (in the item labeled foo), and in the second case to the right of the text (in the item labeled bar).
I have tried using changing the display of the image to inline-block, and inserting
<image xlink:href="https://www.svgrepo.com/show/62382/low-battery.svg" />
within the item (see below), but this does not work. What is the best practice with inserting svg elements inline in divs with other elements? Should span or background-size:contain be used?
#foo { background: #00FF7F; }
#bar { background: #ff0000;}
.items { text-align: center; font-weight: 500; color: #fff; border-width: 2px;
border-color: #fff; padding: 2px;}
.item, .item-selected{ display: inline-block; font-weight: 500;
text-align: center;
vertical-align: middle;
border-width: 2px;
background-color: #484848;
opacity: 0.85;
border-color: green;
border-width: 2px;
border-radius: 3px;
padding: 2px;
color: #fff;
cursor: pointer;
}
.item-selected{
background-color: #fff;
color: #181818;
}
.bullet { display: inline-block; margin: 3px 3px 0px 10px; width: 10px; height: 10px; border-radius: 7px; }
.label { display: inline-block; font-weight: 300;}
image {
width: 50px;
height: 50px;
display: inline-block;
}
<div class='items'>
<div class='item' id= 'wrk'><image xlink:href="https://www.svgrepo.com/show/62382/low-battery.svg" /><div class='bullet' id='foo'></div><div class='label'>foo</div></div>
<div class='item-selected' id = 'brk'><div class='bullet' id='bar'></div><div class='label'>bar</div></div>
</div>
<svg>
<image xlink:href="https://www.svgrepo.com/show/62382/low-battery.svg" />
</svg>
You can use svg as image using img then adjust CSS for alignment:
#foo {
background: #00FF7F;
}
#bar {
background: #ff0000;
}
.items {
text-align: center;
font-weight: 500;
color: #fff;
border-width: 2px;
border-color: #fff;
padding: 2px;
}
img {
vertical-align:middle;
}
.item,
.item-selected {
display: inline-block;
font-weight: 500;
text-align: center;
vertical-align: middle;
border-width: 2px;
background-color: #484848;
opacity: 0.85;
border-color: green;
border-width: 2px;
border-radius: 3px;
padding: 2px;
color: #fff;
cursor: pointer;
}
.item-selected {
background-color: #fff;
color: #181818;
}
.bullet {
display: inline-block;
margin: 3px 3px 0px 10px;
width: 10px;
height: 10px;
border-radius: 7px;
}
.label {
display: inline-block;
font-weight: 300;
}
image {
width: 50px;
height: 50px;
display: inline-block;
}
<div class='items'>
<div class='item' id='wrk'>
<img src="https://www.svgrepo.com/show/62382/low-battery.svg" height="20" width="40" >
<div class='bullet' id='foo'></div>
<div class='label'>foo</div>
</div>
<div class='item-selected' id='brk'>
<div class='bullet' id='bar'></div>
<div class='label'>bar</div>
<img src="https://www.svgrepo.com/show/62382/low-battery.svg" height="20" width="40" >
</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..
How to centering that download button? I tested many times but it's wrong codes.
.col {
width: 100%;
height: auto;
float: left;
}
.download {
width: auto;
font-weight: 600;
font-size: 14px;
color: #000;
border: 2px solid #000;
padding: 17px 37px;
margin-top: 30px;
float: left;
}
<div class="col">
<span class="download">Download</span>
</div>
Just add text-align: center; to .col and replace float:left with display:inline-block; in the button element. jsfiddle
Remove float:left; from .download (because it forces the element to be floated to the left).
Give display:inline-block; (It acts like inline element, it means you can center it by giving text-align:center; to its parent.)
JSFiddle
.col {
width: 100%;
height: auto;
float: left;
text-align: center;
}
.download {
font-weight: 600;
font-size: 14px;
color: #000;
border: 2px solid #000;
padding: 17px 37px;
margin-top: 30px;
display: inline-block;
}