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
Related
I'm trying to put 2 components side by side but I would like one of components to be on the right of the other component without the other component being reorientated.
Example:
Here, after adding a button component to the side of the "Function" heading, the "Function" heading gets pushed to the left. However, I would like the "Function" heading to be in the middle and the "TEST" at the right. As much as possible, I'd like to avoid absolute positions.
<h4 align="right" style={{display: "inline-block"}}>Function</h4><Button sx={{float: "right"}}>Test</Button>```
This is my current code but I'm unsure what I can do. Thanks in advance!
Your question is not very clear to me, but I believe you should read about flex layout CSS property.
All possible solutions of your question
.flex0 {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex1 {
display: flex;
align-items: center;
justify-content: space-around;
}
.flex2 {
display: flex;
align-items: center;
justify-content: space-evenly;
}
<div class="flex0">
<h4 align="right" style={{display: "inline-block"}}>Function</h4><Button sx={{float: "right"}}>Test</Button>
</div>
<div class="flex1">
<h4 align="right" style={{display: "inline-block"}}>Function</h4><Button sx={{float: "right"}}>Test</Button>
</div>
<div class="flex2">
<h4>Function</h4><Button>Test</Button>
</div>
There are many ways to accomplish this. But first you must understand why this misalignment happens when you use float.
Without float on button you can see it perfectly aligns to the heading with inline-block; but as soon as you introduce the float, it detaches the button as pushes it on the right side of the screen on the top corner of the block line. (image attached)
This happened because the heading tags, by default, have margins.
So to align them properly,
1st thing you can do is to provide the float button a similar margin as that of the heading.
<div>
<h4 style='display: inline-block;'>Function</h4>
<Button style='float: right; width: 50px; height: 30px; margin: 1.33em'>Test</Button>
</div>
2nd:
Wrap them in a div and use a grid with align-items: center
<div style='display: grid; grid-template-columns: 1fr 1fr; align-items: center;'>
<h4 style='display: inline-block;'>Function</h4>
<Button style='margin-left: 85%; width: 50px; height: 30px;'>Test</Button>
</div>
3rd
going the usual way, introduce left margin to the button in % (or vice-versa) i.e without float
<div>
<h4 style='display: inline-block;'>Function</h4>
<Button style='margin-left: 75%;'>Test</Button>
</div>
<div>
<h4 style='display: inline-block; margin-right: 85%;'>Function</h4>
<Button style=''>Test</Button>
</div>
Other options:
Utilise flex containers as suggested by other answers.
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
}
.flex-child:first-child {
margin-right: 20px;
}
<div class="flex-container">
<div class="flex-child magenta">
Flex Column 1
</div>
<div class="flex-child green">
Flex Column 2
</div>
</div>
I'm working on an assignment to create a shopping cart, and I'm trying to align my item total vertically in the middle of the other it is nested in.
Here is my code:
.itemInfo {
display: table;
width: 100%;
}
.itemTotal {
display: table-cell;
vertical-align: middle;
text-align: center;
font-weight: bold;
font-size: 1.75em;
float: right;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h3>Items</h3>
<div class="cart">
<div class="itemInfo">
<img class="itemImg" src="someimg.png">
<p class="itemNumber">#Item-S017-01</p>
<h4>Item Name</h4>
<p><input type="number" class="qty" placeholder="1" min="0"> x $250.00</p>
</div>
<div class="itemTotal">
<p><span>$250.00</span></p>
</div>
</div>
</div>
This is what I'm trying to achieve - where "$15.00" is aligned:
I had just started learning HTML a few days ago and I'm not really good at it. Appreciate any help! :)
I would use Flexbox on the .cart element.
You're not quite using display: table-cell correctly on the .itemTotal and we can remove the need for that by using flex.
.itemInfo {
display: table;
width: 100%;
}
.cart {
align-items: center;
display: flex;
justify-content: space-between;
}
I am using following code
<div style="display: table; width: 50%; clear: both; ">
<div style="width: 50%; float: left;">
<h1 style="font-size: 30px; font-weight: 600; color: #000;">
<span><?php echo $genericItem;?></span>
<img style="margin-left: 20px; height: 50px; width: 50px;" src="<?php echo $genericItemPath;?>" alt="">
</h1>
</div>
<div style="width: 50%; float: right; margin-left: 25px;">
<span style="font-size: 20px; color: #000"><b>Reorder</b> in <?php echo $reorderDays;?> days</span>
<span style="display: block; font-size: 12px; color: #d3d3d3; max-width: 90%;"><?php echo $reorderDate;?></span>
</div>
</div>
To create something like this
However the second reorder div is showing below but on right side. How can I modify the div.
I hope this helps. I think that using flex is the best way to make columns and it is the way that works for what you want to do. In addition to that flex is a property that is beginning to be used by modern websites.
.table {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.column {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
justify-content: center;
text-align: center;
}
/* extra */
.column2 {background-color: #f8f8f8;}
<div class="table">
<div class="column">Apple</div>
<div class="column column2">
<p><b>Re-order:</b> in 3 days</p>
<p>Tuesday 19-9-2018</p>
</div>
</div>
Update: You can remove justify-content and text-align as well as .column2. I only have them so you can appreciate how the columns would look.
You have width: 50% but also have a margin-left: 25px which is making your second div exceed your screen width.
Try removing the margin-left and in this case the second div should float right.
If you want to add spacing between them, increase the parent width or decrease each divs width.
I have a problem aligning the profile picture in a chat. The profile picture should always be right beside the username like demonstrated in the picture below.
How can I fix this? Been sitting hours trying to fix this, I know there are some smart people out there that can solve this in no time.
Im not the best at css. Code below:
jsfiddle.net/cefes3au/2/
Solution: align-items: center; Should be align-items: flex-start:
REF:
The align-items property is a sub-property of the Flexible Box Layout module.
REF: https://css-tricks.com/almanac/properties/a/align-items/
<div id="chat" class="row chat" style="height: 50%; margin-bottom: 0px; overflow-y: scroll; overflow-x: hidden;">
<!--IGNORE: CORRECT MESSAGES -->
<div class="col s12 chat-content" style="height: auto; display: flex; align-items: flex-start; margin-top: 10px; margin-bottom: 10px;">
<div class="chat-profile" style="display: inline;">
<img class='responsive-img' style='border-radius: 5px; margin-right: 5px; line-height: 55px;' src='http://poedat.org/wp-content/uploads/2015/12/Evrim-Kuzu_avatar_1449332710-32x32.jpg'>
</div>
<div class="chat-message" style="display: inline; color: #CDCDC8;">
<span>Fürher CSGOArena.com</span>
<p style="margin: 0; color: grey;">This is my first message.</p>
</div>
</div>
<div class="col s12 chat-content" style="height: auto; display: flex; align-items: flex-start; margin-top: 10px; margin-bottom: 10px;">
<div class="chat-profile" style="display: inline;">
<img class='responsive-img' style='border-radius: 5px; margin-right: 5px; line-height: 55px;' src='http://poedat.org/wp-content/uploads/2015/12/Evrim-Kuzu_avatar_1449332710-32x32.jpg'>
</div>
<div class="chat-message" style="display: inline; color: #CDCDC8;">
<span>Fürher CSGOArena.com</span>
<p style="margin: 0; color: grey;">This is my second message.</p>
</div>
</div>
<!-- END HERE -->
<!--PROBLEM STARTS HERE-->
<div class="col s12 chat-content" style="height: auto; display: flex; align-items: flex-start; margin-top: 10px; margin-bottom: 10px;">
<div class="chat-profile" style="display: inline;">
<img class='responsive-img' style='border-radius: 5px; margin-right: 5px; line-height: 55px;' src='http://poedat.org/wp-content/uploads/2015/12/Evrim-Kuzu_avatar_1449332710-32x32.jpg'>
</div>
<div class="chat-message" style="display: inline; color: #CDCDC8;">
<span>Fürher CSGOArena.com</span>
<p style="margin: 0; color: grey; max-width: 225px; word-wrap: break-word;">READ: The profile picture to the left should be right beside the username at the top and not vertically centered to the div. It should look like the other messages above.</p>
</div>
</div>
<!--PROBLEM END HERE-->
</div>
Your CSS as-is doesn't tell the image to go to the top. Depending on your needs, you may be able to use absolute and relative positioning. One simple method is by adding the following CSS:
.chat-content {
position: relative;
}
.responsive-img {
position: absolute;
top: 2px;
}
.chat-message {
margin-left: 40px;
}
In the div class="col s12 chat-content" element, you had align-items: center, which, while a great default for most things where you need a flexbox, it does what it says on the tin can: it aligns everything within the flexbox to be centered on the cross-axis, whereas you want things aligned to the top.
There are three ways you can fix this:
Switch align-items to stretch: this will take up the full height, if you need further decoration or backgrounds within the elements to be aligned properly
Switch align-items to flex-start: this will solve your problem by aligning the profile picture to the top, as you asked though it will not take up the full height
Remove align-items entirely, because it defaults to flex-start. Clean code is usually seen as better than not, I'd argue.
Here's a great resource on flex-boxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
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>