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;
}
Related
Hey I'm new into CSS but I dont know how to make this work. Please help me on how to make this work.
The desired outcome.
My outcome.
The problem is how to make the heading come under the location tags. like in the figma design?
Here is the HTML.
import { GrLocation } from "react-icons/gr"
<div className="container">
<img src="https://source.unsplash.com/WLxQvbMyfas" className="main-img" alt="location-img" />
<div className="tags-colum">
<GrLocation />
<p>JAPAN</p>
<p className="underline-text">View on Google Maps</p>
<div className="container-text">
<h1>Mount Fuji</h1>
</div>
</div>
</div>
Here is the CSS.
.container {
display: flex;
align-items: center;
justify-content: center;
}
.main-img {
height: 168px;
width: 125px;
border-radius: 5px;
}
.tags-colum {
display: flex;
align-items: center;
margin: 20px 20px;
}
.container-text {
display: block;
}
.underline-text {
text-decoration: underline;
}
Your problem is .tags-column is display: flex, so you cannot group all 3 of those elements together. Because the default flexbox is row-based style which means it will align all elements on the same row
For the fix,
Create a group of that left image and all content elements (.container)
Separate the location icon and JAPAN to another group with flexbox (.tags-colum)
Put Mount Fuji separately (.container-text)
Note that, .new-group is just an alias name which I'm using for demonstration, and it has no specific styles
import { GrLocation } from "react-icons/gr"
<div className="container">
<img src="https://source.unsplash.com/WLxQvbMyfas" className="main-img" alt="location-img" />
<div className="new-group">
<div className="tags-colum">
<GrLocation />
<p>JAPAN</p>
<p className="underline-text">View on Google Maps</p>
</div>
<div className="container-text">
<h1>Mount Fuji</h1>
</div>
</div>
</div>
The issue is that you have used display flex to the .tags-colum ( which is the outermost parent) to fix this you can use flex-direction: column, yes adding this will make everything stacked up, so what's the solution?
group your elements like this
<div className="container">
<img src="https://source.unsplash.com/WLxQvbMyfas" className="main-img" alt="location-img" />
<div className="tags-colum">
<div className='gp1'>
<GrLocation />
<p>JAPAN</p>
<p className="underline-text">View on Google Maps</p>
</div>
<div className="container-text">
<h1>Mount Fuji</h1>
</div>
</div>
.tags-colum {
display: flex;
align-items: flex-start;
margin: 20px 20px;
flex-direction: column;
}
.gp1 {
display: flex;
align-items: center;
}
here is an example https://codesandbox.io/s/homepage-forked-g18lgm?file=/public/index.html:56-126
or you can completely remove the display flex from the tags-colum
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 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 had been working on this for some days and reading information about display flex, but I'm still having an issue that I can't fix. I have 3 boxes and they have % width and some px separating each others, something like this
[[first box] [second box] [third box]]
so, to do this I used the nth-of-type(3n+2) in order to get all the middle elements and addind the px separation to both sides
each box has two divs, an image(to the left) and a text, but, when the text has at least two lines, the box get missaligned
[[first box] [second box]
[third box]]
and that's not good. So, playing with the styles if I remove the display:flex and the box were aligned, but the text now is not vertical aligned to the middle -.-
.general-cont {
width: 100%;
text-align: center;
}
.each-cont {
width: 32.5%;
display: inline-block;
margin-top: 6px;
}
.each-cont:nth-of-type(3n+2) {
margin-left: 10px;
margin-right: 10px;
}
.img-cont {
float: left;
height: 48px;
display: flex;
align-items: center;
}
.text-cont {
height: 48px;
overflow: hidden;
align-items: center;
text-align: left;
display: flex;
}
<div class="general-cont">
<div class="each-cont">
<a>
<div class="img-cont">
123
</div>
<div class="text-cont">
456
</div>
</a>
</div>
<div class="each-cont">
<a>
<div class="img-cont">
ABC
</div>
<div class="text-cont">
DEF
</div>
</a>
</div>
<div class="each-cont">
<a>
<div class="img-cont">
QWE
</div>
<div class="text-cont">
ASD
</div>
</a>
</div>
</div>
You're code is a bit of everything. You shouldn't be combining widths, floats etc when you're using flex. Here's a quick example using your code:
.general-cont {
display: flex;
flex-direction: row;
flex-flow: center;
align-items: stretch;
}
.each-cont {
background: #eee;
margin: 0 10px;
padding: 10px;
}
.img-cont {
display: block;
}
http://codepen.io/paulcredmond/pen/rrRvkk
I would advise reading the guide on CSS tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm try to accomplish something rather basic but I failed to succeed, so far.
I have an image and a title which should be displayed in the center of the parent selector (div). Unfortunately I don't know how to properly align them when I center both the logo and the text.
Html:
<div class="content">
<div class="header">
<img src="path/to/image">
<span>Hey this is my title</span>
</div>
</div>
CSS:
.header{
text-align: center;
width: 100%;
height: 40px;
}
.header img{
height: 40px;
width: auto;
display: inline-block;
}
.header span{
display: inline-block;
}
As you can see the logo has a static width/height while the text can have a variable height.
The code above makes the styling like the example below:
Can anyone tell me how to do this? I basically want several divs next to eachother, but all aligned in the center.
Are you looking for vertical-align: middle to center vertically?
.header {
text-align: center;
width: 100%;
height: 40px;
}
.header img {
height: 40px;
width: auto;
display: inline-block;
vertical-align: middle;
}
.header span {
display: inline-block;
vertical-align: middle;
background: #eef;
}
<div class="content">
<div class="header">
<img src="//placehold.it/40?text=Logo" />
<span>Hey this is my title</span>
</div>
</div>
Note: I have added background for better visibility of the borders.
A better explanation:
Use flexbox. I don't know if I correctly got that you want your items to be centered both horizontally and vertically inside header. If not just delete the justify-content part.
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
More info about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/