I have 2 divs and 2 H4 headers which need to be in a line. Tried to align with text-align and float left but it doesn't work.
From my understanding, side by side alignment can be achieved by using float for the elements but it is not happening in my case. Also unable to center them. At present trying to use margin left with a 30% which I believe is not a proper solution. The images below shows how it looks currently and how I am trying to make it look.
HTML
<div class="k-legend-title">
<div class="k-stat-title-color-box" style="background-color: #3DA1ED;"></div>
<h4 class="">Driver 1</h4>
<div class="k-stat-title-color-box" style="background-color: #652D91;"></div>
<h4 class="">Driver 2</h4>
CSS
.k-legend-title{
color: #C3CF01;
}
.k-stat-title-color-box {
width: 10px;
height: 10px;
border-radius: 25px;
background: #ccc;
float: left;
margin-top: 6px;
margin-right:5px;
margin-left: 30%;
}
Current Layout
Trying to get this layout. Center and in 1 line
Make them inline-level, don't use floats. Then you can align them horizontally through text-align on their container, and align them vertically through vertical-align on themselves.
.k-legend-title {
color: #C3CF01;
text-align: center;
}
.k-stat-title-color-box, h4 {
display: inline-block;
vertical-align: middle;
margin: 5px 0;
}
.k-stat-title-color-box {
width: 10px;
height: 10px;
border-radius: 25px;
background: #ccc;
}
<div class="k-legend-title">
<div class="k-stat-title-color-box" style="background-color: #3DA1ED;"></div>
<h4>Driver 1</h4>
<div class="k-stat-title-color-box" style="background-color: #652D91;"></div>
<h4>Driver 2</h4>
</div>
By default h1-h6 elements has display: block, you should use display: inline-block in this situation.
h4{
display: inline-block;
}
h4:first-of-type{
margin-right: 15px;
}
JSfiddle here
Try using display:inline-block with parent using text-align:center:
.k-legend-title {
text-align:center;
color: #C3CF01;
}
.k-stat-title-color-box {
width: 10px;
height: 10px;
border-radius: 25px;
background: #ccc;
display:inline-block;
margin-top: 6px;
}
h4 {
display:inline-block;
}
.k-legend-title h4:first-of-type {
margin-right: 10px;
}
Fiddle: https://jsfiddle.net/kaarccq4/
Related
I am trying to align 3 divs side by side in a navigation bar. I've spent the past 5 hours trying to figure this out and I know it's something super simple that I can't just wrap my head around.
This is where I am at right now.
If I float the align-right div the tags Join & Support stack ontop of each other.
<div id="sticky-nav">
<div class="container">
<div class="box">
<div class="align-left">
Home Listings
</div>
<div class="align-center">
<form action="/action_page.php">
<input type="text" placeholder="Search..">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>
</div>
<div class="align-right">
Join Support
</div>
</div>
</div>
</div>
#sticky-nav {
overflow: hidden;
background-color: #7889D6;
position: fixed;
top: 0;
width: 100%;
}
#sticky-nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
#sticky-nav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
max-width: 300px;
width: 100%;
}
#sticky-nav button {
padding: 6px 10px;
padding-top: 1px; margin-top : 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
margin-top: 8px;
}
#sticky-nav a:hover {
background-color: #ddd;
color: black;
}
#sticky-nav a.active {
background-color: #4CAF50;
color: white;
}
.container {
display: table;
width: 100%;
}
.box {
display: table-row;
}
.align-left {
width: 33%;
text-align: justify;
display: table-cell;
padding: 10px;
}
.align-center {
width: 33%;
text-align: justify;
display: table-cell;
padding: 10px;
}
.align-right {
width: 33%;
display: table-cell;
padding: 10px;
text-align: right;
}
EDIT: This is the layout I am trying to achieve,
I see that you're using display: table to achieve this effect. I highly recommend reading up more first before continuing with your work or project. Some layout concepts you have to know are grid and flex. In your case, we can use the flexbox concept to solve your problem.
flex basically is a method that can distribute space between items more easily. In your case, you can get what you're trying to achieve by using flex-grow and flex-basis. flex-basis defines how, initially, long/tall an item inside a flex container should be. flex-grow defines how an item inside a flex container can expand (grow) in width/height depending on the remaining space of the container.
In your case, we can simply set the flex container's width (your wrapping div) to 100%. To distribute space evenly between the items, we can set all the items' initial widths to 0. Then, distribute the remaining space of the container (which is still 100%) evenly using flex-grow to 1 for each flexbox item. However, this will make all the items similar in width. To make the center div wider, you can set the flex-grow to 2. This will make it so that the left div, center div, and right div have 25%, 50%, and 25% of the container's remaining space in width respectively. I really recommend reading further about flex to understand what I mean. After reading about flex in the above link, try visiting this and this to learn more about flex-basis and flex-grow.
Here's a working solution using flex. Again, I recommend reading more about flex so that you can use flex better.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Helvetica;
}
body,
html {
width: 100%;
height: 100%;
}
#wrapper {
display: flex;
width: 100%;
}
#wrapper * {
padding: 30px;
text-align: center;
color: white;
}
.left-align,
.right-align {
flex-basis: 0;
flex-grow: 1;
}
.center-align {
flex-basis: 0;
flex-grow: 2;
}
.left-align {
background: #121212;
}
.center-align {
background: #232323;
}
.right-align {
background: #454545;
}
<div id="wrapper">
<div class="left-align">Some content</div>
<div class="center-align">Some content</div>
<div class="right-align">Some content</div>
</div>
I have created a simple example for your layout.
You can achieve it using flex box i.e
.box{
display: flex;
width:100%;
justify-content:space-between;
}
Here is the link: https://codesandbox.io/s/optimistic-euclid-xmv6h
Hope it answer your question.
I'm trying to achieve something like this inside a bootstrap column (I don't care much about the styles, but the alignment):
Basically, what's I've tried so far is this:
<div class="circle">NA</div>
<div class="author">
<p>Some text</p>
<p><strong>Should appear here</strong></p>
</div>
where circle is:
.circle {
float: left;
width: 45px;
height: 45px;
border-radius: 50%;
font-size: 15px;
color: #fff;
line-height: 45px;
text-align: center;
background: #66fbd1;
}
Also I've applied a lesser line-height:
.author {
line-height: 50%;
}
I've tried floating the circle div to the left, however, I get this:
I am not really sure if:
a) Floating is the right way to go here, considering the fact the icon and the text should be "centered" along the vertical axis
b) If I did accomplish this with floating, how would I make the text more vertically aligned with the icon? Is it just a matter of adjusting the right margin-top?
Btw, I know I could solve some of these issues with Flexbox, however, I'm not allowed to use it here.
If you are not allowed to use flexbox, inline-block might be a solution for you. When you use float, vertical align is ignored. But it is not ignored when using display: inline-block. Try this:
.circle {
display:inline-block;
width: 45px;
height: 45px;
border-radius: 50%;
font-size: 15px;
color: #fff;
line-height: 45px;
text-align: center;
background: #66fbd1;
vertical-align:middle;
}
.author {
line-height: 40%;
display:inline-block;
vertical-align:middle;
}
<div class="circle">NA</div>
<div class="author">
<p>Some text</p>
<p><strong>Should appear here</strong></p>
</div>
What about display: table; ? :)
<div class="wrapper">
<div class="circle">NA</div>
<div class="author">
<p>Some text</p>
<p><strong>Should appear here</strong></p>
</div>
</div>
.wrapper{
display: table;
table-layout: fixed;
vertical-align: middle;
}
.circle,
.author{
display: table-cell;
}
Also if text will be large and dynamic then have different approach. Have many ways but based your markup you can apply following CSS code:
.circle {
float: left;
width: 45px;
height: 45px;
border-radius: 50%;
font-size: 15px;
color: #fff;
line-height: 45px;
text-align: center;
background: #66fbd1;
margin-right: 10px;
font-family: arial;
}
.author {
font-family: arial;
padding: 5px 0 0 0;
line-height:20px;
}
.author p {
margin: 0;
}
Regarding https://jsfiddle.net/postiffm/74cxr092/
> <div id="Tagline">
> I'm in the center.
> <div id="TaglineLeft"></div>
> <div id="TaglineRight">I am a phone #</div> </div>
How can I align the text in the TaglineRight so it has some space above it like the text in the center section? I've tried some padding and margin stuff, but nothing seems to work.
Thanks.
add line-height:30px; to #TaglineRight a
#TaglineLeft, #TaglineRight {
position: absolute;
color: white;
font-weight: normal;
text-align: center;
height: 100%;
width: 30%;
top: 0;
border-radius: 7px;
height: 20px;
padding: 5px;
}
you may add height: 20px; and padding: 5px; to #TaglineLeft, #TaglineRight { class
an old fashion way is to treat the child element as an table data by set it to display: table-cell, vertical-align: middle; & set it's parent to display: table;.
in that way you can change the height of the parent to whatever/whenever you like to and the child element will always stay vertical aligned. not like CSS3 solutions, it will work in old browsers too and cross browser support of course.
https://jsfiddle.net/ryf0w7rp/ - try to change the "#Tagline" element's height from 20px to other value and see the result.
*if you don't want main wrapper elements to use display: table so you can create another level of element to use display: table.
*for the example i made the solution just for the "#TaglineRight" element which has an inner <a> element. to make the other elements work the same, add the same structure and set the CSS to the right elements.
Instead of playing around with position:absolute/relative.
Consider using display:flex
check this solution
#Tagline {
color: white;
font-weight: normal;
letter-spacing: 2px;
text-align: center;
margin-bottom: 10px;
border: 0 solid #ff9706;
border-radius: 7px;
background-color: #ff9706;
display: flex;
height:30px;
line-height: 30px;
justify-content: space-between;
}
#TaglineLeft,
#TaglineRight {
color: white;
height: 100%;
width: 30%;
border-radius: 7px;
text-align: center;
}
#TaglineLeft {
margin-top: 0px;
background-color: #6673aa;
order: -1;
}
#TaglineRight {
border: 0 solid #7e922e;
background-color: #7e922e;
}
#TaglineRight a {
color: white;
letter-spacing: 1px;
text-decoration: none;
}
<div id="Tagline">
I'm in the center.
<div id="TaglineLeft">left line</div>
<div id="TaglineRight">I am a phone #
</div>
</div>
Hope it helps
I'm trying to center the text horizontally, but it doesn't work. It seems to be because of the display: table-cell
Would you know a work around? (note that I'm using bootstrap)
Thanks! > Codepen: http://codepen.io/goodux/pen/wgBCf
html:
<div class="feature">
<span class="glyphicon glyphicon-star feature-icon"></span>
<p class="feature-text text-center">
Gather user's feedback and engineer's requirements.
</p>
</div>
css:
.feature {
margin-bottom: 3.5em;
background-color: #f3f3f3;
border-radius: 5px;
}
span.feature-icon {
background-color: #FA6900;
border-radius: 3px;
color: #FFF;
font-size: 3em;
padding: .5em;
position: absolute;
top: 0;
}
p.feature-text {
overflow: hidden;
padding: 0 .5em 0 6.5em;
vertical-align: middle;
height: 6em;
display: table-cell;
}
.text-center {
text-align: center;
}
For display:table-cell to work correctly it needs to be inside a display:table element.
So, if you change the .feature rule to
.feature {
margin-bottom: 3.5em;
background-color: #f3f3f3;
border-radius: 5px;
display:table;
width:100%;
}
it will work as expected: http://codepen.io/gpetrioli/pen/EDtCq
of course you could avoid using display:table-cell if it is not really needed. (and in your example it looks like it is not..)
Try p {text-align: center;margin: auto }and why are you using display:table-cell ?
I have this set of html and css. What I want is to have to have the small gadgets blocks float left but to centered inside of the absolute positioned gadget-wrapper.
So, the gadget wrapper is absolute positioned to the bottom of a page. It holds x number of gadgets that floats left inside of the wrapper.
All these gadget should be centered inside the wrapper - is this possible and how ...? This is really killing me ....
HTML
<div id="gadget-wrapper">
<div class="gadget">
<h2>1</h2>
<div class="value-holder critical">not set</div>
<div class="value-holder non-critical">not set</div>
</div>
<div class="gadget">
<h2>2</h2>
<div class="value-holder critical">not set</div>
<div class="value-holder non-critical">not set</div>
</div>
<div class="gadget">
<h2>3</h2>
<div class="value-holder critical">not set</div>
<div class="value-holder non-critical">not set</div>
</div>
</div>
CSS
#gadget-wrapper {
width: 900px;
font-family: "Century Gothic";
color: #FFF;
position: absolute;
bottom: 10px;
outline: 1px solid green;
}
.gadget h2 {
margin: 0px;
font-weight: normal;
font-size: 16px;
}
.gadget {
min-width: 120px;
margin-right: 10px;
padding: 5px;
-webkit-border-radius: 10px;
background-color: #383838;
opacity: 0.75;
float: left;
border: 4px solid #000;
}
.value-holder.critical.active {
color: #FF0000;
}
.value-holder.non-critical.active {
color: #FFFF00;
}
.value-holder {
font-size: 28px;
float: left;
width: 50%;
text-align: center;
}
Have you tried making the gadget elements inline and aligning them to the center with text-align?
#gadget-wrapper {
...
text-align: center;
}
.gadget {
display: inline;
float: none;
}
This might work, I'm just not sure how the block level elements inside will behave (I'm unable to test this right now). You can also try inline-block instead of inline.
display: inline-block; works with the first answer. make sure you removed float: left;