I am trying to do two things:
1 - Align a Span to the middle of an Img;
2 - Align the Span to the right of the parent div
This is what I have today ->
This is the current code:
<div class="row" style="text-align: right;">
<img src="thumbnails/americares.png" class="pl-2 pb-2">
<span class="price" style="display:inline-block;padding-bottom:5px;">$20</span>
</div>
Class price looks like this:
<style>
.price{
padding-bottom: 15px;
color: #29303b;
font-size: 18px;
font-weight: 600;
margin-right: 10px;
}
</style>
I need to move the price here ->
Add display flex to the parent container.
.row {
display: flex;
align-items: center;
justify-content: space-between;
}
And you probably won't need padding-bottom: 15px; anymore.
You can use flex row. Since you are using bootstrap 4, we can implement this.
<div class="row d-flex flex-row justify-content-between align-items-center">
<img src="thumbnails/americares.png">
<span class="price">$20</span>
</div>
Related
im trying to create a footer with a few social media icons...however, the method i've tried has resulted in the following problem :
expectation:
reality:
as you can see i'm failing in bringing the social media icons closer together... i tried setting the columns flex % to - however that pulls everything closer together towards the left of the screen...
here is my .row and .column as well as the social media icons..
.row {
display: flex;
}
.column {
flex: 30%;
padding: 00px;
}
.marginauto1 {
margin: 30px auto 20px;
display: block;
horizontal-align; middle;
vertical-align: middle;
}
<footer class= "marginauto1">
<center><div class="row">
<div class="column">
<center><a class= "pointer" href="twitter_url">
first time taking a stab at this on my own and I'm just really stuck here.. any help or tips would be appreciated!
If you want to put all your icons together in the middle:
img{
height:50px;
}
div{
display:flex;
justify-content: center;
background-color:blue;
}
<footer>
<div>
<img src="data:image/png;base64,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">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyFcxKQYRAhR9esHvHVZokZGCYFNC1_rMHhw&usqp=CAU">
</div>
</footer>
<center> tag will not applicable if you are using flexbox. Instead flex-box itself has some properties that you can make use of. In your use-case you can go with justify-content: center
.row{
display: flex;
justify-content: center;
}
.item{
color: red;
background: lightblue;
margin-left: 20px;
}
<footer class= "marginauto1">
<div class="row">
<div class="item 1">
<h1>Telegram</h1>
</div>
<div class="item 2">
<h1>Facebook</h1>
</div>
<div class="item 3">
<h1>Twitter</h1>
</div>
</div>
</footer>
If you don't want any space in between of 2 or more items you can remove the margin.
Its working as expected. You have defined .column with flex: 30%; which intrun will split into 3
flex-grow: 1;
flex-shrink: 1;
flex-basis: 30%;
So what have you done is allowing the element to grow till the available width with a minimum of 30% relative to the container. This is because the flex-basis is defined. This will be 33% each.
For your soution to work remove flex: 30%; from .column. This will take the width depending on the content.
If you want some gap between the element, try adding some margin or padding, I have used margin for that. Or you can set the width of column element.
Inorder to align the items center in horizontal axis, use justify-content: center; for the flex element.
Working Fiddle
.row {
display: flex;
justify-content: center;
}
.column {
padding: 0px;
margin-right: 20px;
}
.marginauto1 {
margin: 30px auto 20px;
display: block;
}
.pointer img {
width: 50px;
}
<footer class="marginauto1">
<div class="row">
<div class="column">
<a class="pointer" href="">
<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-512.png" alt="">
</a>
</div>
<div class="column">
<a class="pointer" href="">
<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-512.png" alt="">
</a>
</div>
<div class="column">
<a class="pointer" href="">
<img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-512.png" alt="">
</a>
</div>
</div>
</footer>
so im trying to exactly center one flex(unless anyone has other idea) item and aligning second one e.g 20px to right of my first item. My code:
<div className="d-flex justify-content-center border">
<h1 className="title">Tacos</h1>
<div className="icon"></div>
</div>
and this is the result
As you can see, they both are centered, my goal is to put text "Tacos" in exact center and then align my icon like 20px to right. Is there a way to do it?
You can use width: 0; white-space: nowrap; trick.
.flex {
display: flex;
justify-content: center;
}
.icon {
width: 0;
white-space: nowrap;
margin-left: 20px;
}
<div class="flex">
<div class="text">Tacos</div>
<div class="icon">🌮🌮🌮🌮🌮🌮🌮</div>
</div>
This question already has answers here:
Auto-size dynamic text to fill fixed size container
(21 answers)
Closed 2 years ago.
I am trying to create the following effect
How do I make it so the letter spacing of the bottom text makes to the end of the container?
HTML
<section class="nav">
<div class="logo">
<p id="top">Reagan</p>
<p id="bottom">Clayton</p>
</div>
</section>
I can offer such a solution:
.logo {
width: 300px;
}
#bottom {
display: flex;
justify-content: space-between;
}
#bottom_two {
display: flex;
justify-content: space-between;
text-transform: uppercase;
}
#bottom_three {
display: flex;
justify-content: space-between;
text-transform: uppercase;
color: blue;
}
<section class="nav">
<div class="logo">
<p id="top">Reagan</p>
<p id="bottom"><span>C</span><span>l</span><span>a</span><span>y</span><span>t</span><span>o</span><span>n</span></p>
<p id="bottom_two"><span>C</span><span>l</span><span>a</span><span>y</span><span>t</span><span>o</span><span>n</span></p>
<p id="bottom_three"><span>C</span><span>l</span><span>a</span><span>y</span><span>t</span><span>o</span><span>n</span></p>
</div>
</section>
Simple solution: just need to use letter-spacing css property.
To see output click on button "Run code snippet".
#logoText{
font-size:45px;
text-transform: uppercase;
margin-bottom:0;
padding-bottom:0
}
#sologunText{
font-size:20px;
letter-spacing: 30px;
margin-top:5px;
padding-top:0
}
<section class="nav">
<div class="logo">
<p id="logoText">Logo Text</p>
<p id="sologunText">Sologun</p>
</div>
</section>
I want to use flex to make a responsive section with static items aligned right on first row. The static items will occupy variable space on the first row (the static items will be different size in different layout thus it is variable space), the other items should avoid overlap the static items and auto wrap to second row when first row do not have enough space.
Expected result:
Screen width: 768px
|---------------------------------------------------------------------|
|[Item 1] [Item 2] [Item 3] [Static Item 1] [Static Item 2]|
|---------------------------------------------------------------------|
Screen Width: 320px
|-------------------------------------------|
|[Item 1] [Static Item 1] [Static Item 2]|
|[Item 2] [Item 3] |
|-------------------------------------------|
I tried following code but the static item cannot cannot keep at first line
.flex {
display: flex;
border: 1px solid black;
flex-wrap: wrap;
}
.item {
display: inline-flex;
border: 1px solid blue;
margin: 5px;
white-space: nowrap;
}
.static {
margin-left: auto;
flex-wrap: nowrap;
display: inline-flex;
}
<div class="flex">
<div class="item">Dynamic Item 1</div>
<div class="item">Dynamic Item 2</div>
<div class="item">Dynamic Item 3</div>
<div class="static">
<div class="item">Static Item 1</div>
<div class="item">Static Item 2</div>
</div>
</div>
I have idea with float and use with inline-block if you didn't want flex style
Main factor is...
display:inline-block on item
float:right on static item
In this example you can resized div box to test responsive ; )
.container{
display:block;
border: 2px solid;
resize: both;
overflow: auto;
background-color: yellow;
}
.item{
display:inline-block;
background-color: blue;
margin: 10px 10px;
}
.item.static{
float:right;
}
<div class="container">
<div class="item static">item5</div>
<div class="item static">item4</div>
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
You could try to combine a flexbox with two inline-flexboxes. The outer flexbox will align both boxes inside to the edges. On smaller screens only the first one will wrap.
.wrapper {
display: flex;
justify-content: space-between;
}
.item {
display: inline-flex;
}
.static-items {
display: inline-flex;
justify-content: flex-end;
flex-wrap: nowrap;
}
.item {
width: 100px;
height: 20px;
margin: 2px;
background-color: orange;
}
<div class="wrapper">
<div class="items">
<div class="item">
Item 1
</div>
<div class="item">
Item 2
</div>
<div class="item">
Item 3
</div>
</div>
<div class="static-items">
<div class="item">
Static Item 1
</div>
<div class="item">
Static Item 2
</div>
</div>
</div>
<br/>
Try this
<section class="row">
<section class="group">
<item1 />
<item2 />
<item3 />
</section>
<section class="group">
<item4 />
<item5 />
</section>
</section>
CSS
.row{
display: flex;
justify-content: space-between
}
I have 2 divs inside another div container. I'm using flexbox to center them vertically inside the container, but I want them to be next to each other horizontally rather than one on top of the other. I tried a few different approaches including changing the display property of the container from flex to inline-flex as well as adding display:inline-block to the child divs. Here is a picture of what I'm working with. As you can see the 2 divs (the picture and group 1 label) are centered within the parent div, but I want Group 1 to be next to the picture instead of below it.
Code below and link to JSfiddle:
HTML
<div class="user-group">
<div>
Picture 1
</div>
<div class="user-group-name"><h4>Group 1</h4></div>
</div>
JS
.user-group{
font-family: 'Purista';
border: solid 1px;
display: inline-flex;
float: left;
justify-content:center;
align-content:center;
flex-direction:column; /* column | row */
width: 50%;
height: 200px;
}
.user-group > div{
display: inline-flex;
}
It depends if you intend to have multiple picture + text pairs in the element. If you don't, simply using align-items: center should fix your issue. There are some issues with your code:
align-content is not a flex property
Avoid using display: inline-flex, your situation does not call for it
Floats and flex are conflicting layout methods. Pick one—in this case, we settle for flex.
Use the default flex direction, which is row (if undeclared, it defaults to row, so we can just remove that property)
.user-group {
font-family: 'Purista';
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 200px;
}
h4 {
margin: 0;
}
<div class="user-group">
<div>
<img src="https://placehold.it/32x32" alt="" title="" />
</div>
<div class="user-group-name">
<h4>Group 1</h4></div>
</div>
On the other hand, if you have multiple picture + text pairs, you will have to resort to nesting. Each pair will have to be wrapped by an additional <div>:
.user-group {
font-family: 'Purista';
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 50%;
height: 200px;
}
.user-group > div {
display: flex;
margin-bottom: 10px;
}
h4 {
margin: 0;
}
<div class="user-group">
<div>
<img src="https://placehold.it/32x32" alt="" title="" />
<div class="user-group-name"><h4>Group 1</h4></div>
</div>
<div>
<img src="https://placehold.it/32x32" alt="" title="" />
<div class="user-group-name"><h4>Group 2</h4></div>
</div>
<div>
<img src="https://placehold.it/32x32" alt="" title="" />
<div class="user-group-name"><h4>Group 3</h4></div>
</div>
</div>