I wonder how to align three elements in one div. Basically, it should look like this
Solved.
For future readers, the solution for my problem looks like this
<div style="text-align: center;">
<span style="float: left;">LEFT</span>
<span style="margin: auto;">CENTER</span>
<span style="float: right;">RIGHT</span>
</div>
.container{
display: flex; // working with all latest browsers
display: -webkit-flex; // for old version of safari
display: -ms-flex; // for old versions of IE
justify-content: space-between;
}
.container span{
flex: 1;
text-align: center;
}
<div class="container">
<span>LEFT</span>
<span>CENTER</span>
<span>RIGHT</span>
</div>
The best thing is if you are adding more data inside container. it will give equal spacing. And inline styling is not a better option
Demo here
Try using float:left and float:right for left and right see this fiddle:
https://jsfiddle.net/u924gptz/
Please do follow certain things like not have any styles inline
.wrapper {
text-align: center;
}
.left {
float:left;
}
.center {
margin: auto;
}
.right {
float: right;
}
<div class="wrapper">
<span class="left">LEFT</span>
<span class="center">CENTER</span>
<span class="right">RIGHT</span>
</div>
Use DIVs instead of spans and this simple CSS for the container element:
.x {
display: flex;
justify-content: space-between;
}
display: flex does the equal distirbution, justify-content: space-between; makes the outmost elements align at the borders.
.x {
display: flex;
justify-content: space-between;
}
<div class="x">
<div>LEFT</div>
<div>CENTER</div>
<div>RIGHT</div>
</div>
All 3 spans should have separate stylings.
Here:
<div style="text-align: center;">
<span style="float: left;">LEFT</span>
<span style="margin: auto;">CENTER</span>
<span style="float: right;">RIGHT</span>
</div>
This should do it.
well there are a number of ways to do this. but you could use something like this
div { display:flex; align-items: center;}
span:first-child {float:left;}
span:nth-child(2) {margin:0 auto}
span:last-child {float:right}
<div>
<span>LEFT</span>
<span>CENTER</span>
<span>RIGHT</span>
</div>
Related
I have this html structure
body{
max-width: 943.61px;
margin: 0 auto;
<body>
<div class="home">
<span class="name">Name</span>
<span class="about-me">Python</span>
<span class="language">RU|ENG</span>
</div>
</body>
How can I align name to the left, about_me to center, and language to the right of the parent tag?
You need to make .home into a flex container and set justify-content: space-between. This makes it so that the children is distributed along the length of the flexbox in the flex direction.
.home {
/* just for demo */
width: 100%;
background-color: pink;
display: flex;
flex-direction: row;
justify-content: space-between;
}
<body>
<div class="home">
<span class="name">Name</span>
<span class="about-me">Python</span>
<span class="language">RU|ENG</span>
</div>
</body>
A Complete Guide to Flexbox is a good resource on how to use flex in css.
An other solution with flexbox and text-align (just to be different from #cSharp)
body {
max-width: 943.61px;
}
.home {
display: flex;
}
span {
flex: 1;
}
.about-me {
text-align: center;
}
.language {
text-align: right;
}
<body>
<div class="home">
<span class="name">Name</span>
<span class="about-me">Python</span>
<span class="language">RU|ENG</span>
</div>
</body>
I am trying to align small text to the bottom of large text.My code is given below.
I am getting:
I want to achieve this image output:
<div style="width: 60%;float: left;height: 100%; display: flex;justify-content: flex-start;flex-direction: column;text-align: left;margin-top: 25px;">
<span class="Tacivity_head">Total Activity</span>
<div style="display: flex;">
<span class="Tacivity_head">12100</span>
<span >10% Last Week</span>
</div>
</div>
try flex align-items: flex-end;, check this for more about flex
.Tacivity_head{
font-size:35px;
font-weight: bold;
}
.nunber-container{
display:flex;
align-items: flex-end;
}
<div style="width: 60%;float: left;height: 100%; display: flex;justify-content: flex-start;flex-direction: column;text-align: left;margin-top: 25px;">
<span class="Tacivity_head">Total Activity</span>
<div style="nunber-container">
<span class="Tacivity_head">12100</span>
<span >10% Last Week</span>
</div>
</div>
There are 2 ways to make you text appear smaller:
With font-size: 10px; // enter your px there
Or with font-size: x-small;
Margin will be necessary in this approach because the small font is moved upwards.
You can then define your margin in your CSS:
HTML:
<span class="Test">10% Last Week</span>
CSS:
.Test{
// flexible values, adapt these for your case
font-size: 10px;
margin-top: 5px;
}
Align items to baseline will be ok?
.container {
width: 60%;
float: left;
height: 100%;
display: flex;
justify-content: flex-start;
flex-direction: column;
text-align: left;
margin-top: 25px;
}
.ft__xs {
font-size: x-small;
}
<div class="container">
<span class="Tacivity_head">Total Activity</span>
<div style="display: flex; align-items: baseline">
<span class="Tacivity_head">12,100</span>
<span class="ft__xs">10% Last Week</span>
</div>
</div>
Good day sir, I'll first personally advice you to separate the css from the html either by using the <style> at the head tag or an external file using the <link> then secondly with regards to the subscript, why don't you use the <sub> tag for the spanned "10Last week" try this new one lets see... have a nice day sir
I would like to keep two <p> elements inline after I float one of them to the right.
.bottomtext {
background-color: #e6fbd0;
}
.bottomtext p {
display: inline;
}
.right {
float: right;
clear: left;
}
<div class="bottomtext">
<p class="right">
© Name
</p>
<p>
<a>Text</a>
</p>
</div>
The problem is so simple that I don't know why it even exists without an obvious fix.
Here is the jsfiddle. This is the first website I have ever made, so bear with me...
You can float the text left, the name right:
.bottomtext {
background-color: #e6fbd0;
overflow:auto;
}
.left {
float: left;
}
.right {
float: right;
}
<div class="bottomtext">
<p class="right">
© Name
</p>
<p class="left">
<a>Text</a>
</p>
</div>
Or maybe use flexbox:
#wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #e6fbd0;
}
<div id="wrapper">
<p>Text</p>
<p># Name</p>
</div>
I think what you are trying to do should be easier with flexbox.
Maybe something like this:
.bottomtext {
display: flex;
flex-direction: row;
justify-content: space-between;
}
Note that the flex-direction: row is the default direction when using display: flex.
I am making a website and I'm having a small amount of problems with aligning some buttons to the right side of the page.
I've tried using text-align: right and float: left.
Can anyone try to see what I'm doing wrong?
It's currently live at http://biolinks.redxte.ch/
Anything is appreciated.
Use this
.button-parent {
text-align: right;
}
button {
display: inline-block;
}
or if you want to make it position absolutely, you can use this
.add-me {
position: absolute;
right: 20px;
}
You can use
.add-me{
margin-left : 80%;
}
I am a beginner but I think this will solve your problem.
Just add .col-sm-12 div after the row and it work perfectly
<div class="row social" id="snapchat">
<div class="col-sm-12">
<img src="/i/snapchat.svg" class="social-img">
<span class="social-text">Snapchat</span>
<span class="add-me">
Add Me
</span>
</div>
</div>
If you wrap the stuff you want on the left in an element, you can use flexbox with justify-content: space-between to push the elements on the far edges of the row.
You can also use flexbox on each of those elements with align-items: center to center everything vertically.
I wrapped the content on the left in a div with class .icon, and then all you need to apply is this CSS
.social, .icon, .add-me {
display: flex;
justify-content: space-between;
align-items: center;
}
Here's a demo.
/* included this from your site so the image won't be huge */
.social-img {
position: relative;
display: inline-block;
width: 60px;
height: 60px;
}
/* this is the part you need */
.social, .icon, .add-me {
display: flex;
justify-content: space-between;
align-items: center;
}
<base href="http://biolinks.redxte.ch/">
<div class="row social" id="instagram">
<div class="icon"> <!-- added this div -->
<img src="/i/instagram.png" class="social-img">
<span class="social-text">Instagram</span>
</div>
<span class="add-me">
View Profile
</span>
</div>
You can use the basic One. Which is:
<button class="btn" style="float: right;">See More..</button>
Hopefully this isn't an unsolved task, but I'm trying to vertically justify an unknown (ish) number of divs inside of a container.
Each div should be equal distances from each other, and, additionally, the same distance from the edges. (Assuming the last part can be accomplished using ghost elements before and after)
The divs will each fill the width of the container, and the container is a set height, but the number of elements inside the container is unknown.
I'm assuming it can be done using Flexbox to some degree, but have been unsuccessful in my attempts thus far.
Yep, flexbox is the simplest way to do it.
On the container element:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
On the child elements:
.container div {
flex: 1;
width: 100%
}
For the spacing between the elements, just add padding to the container and bottom margins to the children.
The style would look like this:
.container {
/* Same as above, and */
padding: 20px;
}
.container div {
/* Same as above, and */
margin-bottom: 20px;
}
.container div:last-of-type{
margin-bottom: 0;
/* So that spacing is even at bottom and top of container */
}
(I was typing this when you posted your answer, so I put it up anyway)
Fiddle
I use justify-content:space-evenly.
HTML:
div.container {
display: flex;
}
div.one_item_container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
<div class="container">
<div class="one_item_container">
<img height="30" src="hello.jpeg" style="background-color:lightblue;" />
</div>
<div class="one_item_container">
<img height="50" src="hello2.jpeg" style="background-color:lightblue;" />
</div>
<div class="one_item_container">
<img height="40" src="hello2.jpeg" style="background-color:lightblue;" />
</div>
</div>
As usual, no matter how long I search, I find the answer only immediately after I ask the question. :D
For those curious, or for my own future reference: Flexbox's justify DOES work, you just need a few more options:
HTML:
<div id="outer-container">
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
</div>
CSS:
#outer-container {
height: 250px;
width: 200px;
background: red;
display: flex;
justify-content: space-around;
flex-direction: column;
}
.inner-element {
width: 200px;
height: 10px;
background: blue;
}
https://css-tricks.com/almanac/properties/j/justify-content/
https://jsfiddle.net/WW3bh/