I am having an issue with positioning in CSS. Now I have an icon and text like this :
Icon
But I want to make the icon go to the middle of the text. How do I do that?
You can use Flex.
Live code: Codepen
HTML:
<div class='alert'>
<span class='alert-icon'>icon</span>
<div class='alert-content'>
<div>text</div>
<div>text</div>
<div>text</div>
</div>
<span class='alert-close-icon'> close icon </span>
</div>
CSS:
.alert {
background-color: red;
color:#fff;
display: flex;
align-items: center;
justify-content: space-between;
width: 250px;
border-radius: 6px;
padding: 10px 10px
}
Just add the images and replace them with the text inside .alert-icon .alert-close-icon
Just use display: flex and align-items: center on the parent container of two block of elements to aligns.
.inlineElements {
display: flex;
}
.alignItemsCenter {
display: flex;
align-items: center; /* Pack items around the center */
}
.content {
margin: 0 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div class="inlineElements">
<div class='alignItemsCenter'>
<i class="fa-regular fa-circle-xmark"></i>
<div class="content">
<div>
Hello
</div>
<div>
Display
</div>
<div>
Flex
</div>
</div>
</div>
<i class="fa-solid fa-xmark"></i>
<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 try to develop website for my portfolio. I want to do something like that :
But I've some problem with the 3 icons for Twitter/Instagram and Deviantart. To put the icons like that, I use the flexbox in html. Currently, I've that :
#conteneur {
display: flex;
justify-content: space-between;
}
<div id="conteneur">
<div class="element1">
<img src="https://zupimages.net/up/21/29/vbxh.png">
</div>
<div class="element2">
<img src="https://zupimages.net/up/19/51/4gl0.png">
</div>
<div class="element3">
<img src="https://zupimages.net/up/21/29/dbtc.png">
</div>
</div>
Test with CodePen here : https://codepen.io/lucbenedet/pen/yLbPMgK
But as you can see, the pictures are too large and when I try to put the pictures to a size of 35px like that :
#conteneur
{
display: flex;
justify-content: space-between;
width: 35px;
}
or
.element1
{
width: 35px;
}
The resize doesn't works...
Someone to show how to do that ?
You can update your CSS with following code.
#conteneur {
display: flex;
justify-content: space-between;
width: 150px;
padding: 10px;
}
#conteneur div img {
width: 35px;
height: 35px;
}
<div id="conteneur">
<div class="element1">
<img src="https://zupimages.net/up/21/29/vbxh.png">
</div>
<div class="element2">
<img src="https://zupimages.net/up/19/51/4gl0.png">
</div>
<div class="element3">
<img src="https://zupimages.net/up/21/29/dbtc.png">
</div>
</div>
You can have some space between icons when you maximize the width of the container
you can reset width on the flex-container to max-content (3 icones shouldnot overflow) and use gap to set a distance in between them.
You could use em for the gap and icon's width to have a coherent render.
Possible example:
#conteneur {
display: flex;
width: max-content;
align-items: center;
margin: auto;
gap: 1.6em;
}
#conteneur div img {
width: 3em;
}
<div id="conteneur">
<div class="element1">
<img src="https://zupimages.net/up/21/29/vbxh.png">
</div>
<div class="element2">
<img src="https://zupimages.net/up/19/51/4gl0.png">
</div>
<div class="element3">
<img src="https://zupimages.net/up/21/29/dbtc.png">
</div>
</div>
possible example from your codepen https://codepen.io/gc-nomade/pen/qBmVjBV
I have a frustrating problem with the otherwise great flexbox capabilities. I have the following layout with a centered column
The problem is, if one of the texts in the row grows or shrinks, then the FB/IG icons will not be in the same column line anymore. See what happens:
How can I achieve for variable width texts to not make the element grow to the left, but make the FB and IG icons actually stay in the same line no matter the variable texts??
Here is the code
.test-links {
display: flex;
flex-direction: column;
}
.test-link {
display: flex;
justify-content: center;
align-items: center;
}
<div class="test-wrapper">
<img class="test-img" src="path" />
<div class="test-links">
<a class="test-link">
<i class="fb"></i>
<span>Test</span>
</a>
<a class="test-link">
<i class="ig"></i>
<span>LongerText</span>
</a>
</div>
</div>
Thank you for your help!
.test-links {
display: flex;
flex-direction: column;
}
.test-link {
display: flex;
justify-content: left;
align-items: center;
width:100px;
margin:0 auto;
}
.test-wrapper
{
text-align:center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test-wrapper">
<img class="test-img" src="https://dummyimage.com/100x100/000/fff" />
<div class="test-links">
<a class="test-link">
<i class="fb fa fa-facebook"></i>
<span>Test</span>
</a>
<a class="test-link">
<i class="ig fa fa-instagram"></i>
<span>LongerText</span>
</a>
</div>
</div>
I used <img src="http://via.placeholder.com/20x20" /> instead of icons, so to render something. position: absolute for text does the job.
Following MDN's definition:
[position] absolute: the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
... so left:100% moves it to the left for whole width of parent's element, which is only an icon. You can create a distance between icon/image and text using margin-left for text. position: relative for link makes it a hook for position of absolute child.
You can adjust precise values.
Snippet
.test-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.test-links {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px 0 0 0;
}
.test-link {
position: relative;
}
.test-link span {
position: absolute;
top: 0;
left: 100%;
}
<div class="test-wrapper">
<img class="test-img" src="http://via.placeholder.com/50x50" />
<div class="test-links">
<a class="test-link">
<img src="http://via.placeholder.com/20x20" />
<span>Test</span>
</a>
<a class="test-link">
<img src="http://via.placeholder.com/20x20" />
<span>LongerText</span>
</a>
</div>
</div>
Since, span cannot take width, use p instead and then add the following class to you code:
.test-link p{
width: 50px;
height:auto;
word-break:break-all;
text-align:left;
}
And then you will achieve the desired format.
Here is a link to the fiddle supporting this answer.
Here is the snippet:
.test-links {
display: flex;
flex-direction: column;
}
.test-link {
display: flex;
justify-content: center;
align-items: center;
}
.test-link p{
width:50px;
height:auto;
word-break:break-all;
text-align:left;
}
<div class="test-wrapper">
<div class="test-links">
<a class="test-link">
<img src="http://via.placeholder.com/20x20">
<p>Test</p>
</a>
<a class="test-link">
<img src="http://via.placeholder.com/20x20">
<p>LongerText</p>
</a>
</div>
</div>
Hope this was helpful.
I have a p element, besides which I am placing a material icon via font method.
Both are inline-block to display side by side, but I am having trouble moving the icon vertically without breaking neighboring layout.
I have tried wrapping the icon in a div, span, and playing with making its container positioned relatively/absolutely but cannot seem to make it behave.
Simplified example for my project:
html
<div class="card-heading">
<p>
my title
</p>
<div class="icon-holder">
<i class="material-icons">camera</i>
</div>
</div>
scss
.card-heading {
p {
display: inline-block;
}
.icon-holder {
display: inline-block;
i {
padding-top: 6px;
}
}
}
Example codepen illustrating issue https://codepen.io/joshuaohana/pen/dRqgye
In this example, I am trying to move the icon down by 6px, but instead of moves both the p and the icon
Use vertical-align to center the icon.
.card-heading p {
display: inline-block;
}
.card-heading .icon-holder {
display: inline-block;
vertical-align: middle;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div class="card-heading">
<p>
my title
</p>
<div class="icon-holder">
<i class="material-icons">camera</i>
</div>
</div>
You can add display: flex to .card-heading. Need to remove the padding-top: 6px from .icon-holder.
Codepen here.
Read more about CSS Flexible Box here
.card-heading {
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
}
.card-heading p, .card-heading .icon-holder {
display: inline-block;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div class="card-heading">
<p>
my title
</p>
<div class="icon-holder">
<i class="material-icons">camera</i>
</div>
</div>
I have the following HTML structure:
<div id="outer">
<div id="left">
<div id="leftContainer"><span>bla</span><span>bla</span><span>bla</span><span>bla</span></div>
</div>
<div id="right">
<div class="item"><span>item text 1</span></div>
<div class="item"><span>item text 2</span></div>
<div class="item"><span>item text 3</span></div>
<div class="item"><span>item text 4</span></div>
<div class="item"><span>item text 5</span></div>
<div class="item"><span>item text 6</span></div>
</div>
</div>
With the corresponding styles:
#left, #right {
display: inline-block;
}
.item {
display:inline-block;
padding: 0px 5px;
}
#right {
position: absolute;
/*right:0px;*/ /*this little thing causes my problems*/
text-align:right;
border-color: red;
}
I need the right div to be right aligned. For that I set right:0px; but then the right element overlap the left div. If right:0px; is not set, then the item elements will break on a new line (which is part of my requirements) but the right element will be, obviously, left aligned. See the fiddle, comment/uncomment right:0px; and play with the width of the result panel.
Is the a way of right aligning the right div without overlapping? Floating is currently not a solution.
I'm not entirely clear on how the right div is supposed to behave after the 'collision' point but flexbox does allow for the alignment you wanted without the overlap that seems to be problematical for you.
#outer {
position: relative;
display: flex;
justify-content: space-between;
}
#outer {
position: relative;
display: flex;
justify-content: space-between;
}
div {
border: 1px solid black;
}
#left div span {
margin: 0px 5px;
display: inline-block;
}
.item {
display: inline-block;
padding: 0px 5px;
}
#right {
text-align: right;
border-color: red;
}
<div id="outer">
<div id="left">
<div id="leftContainer">
<span>bla</span>
<span>bla</span>
<span>bla</span>
<span>bla</span>
</div>
</div>
<div id="right">
<div class="item"><span>item text 1</span>
</div>
<div class="item"><span>item text 2</span>
</div>
<div class="item"><span>item text 3</span>
</div>
<div class="item"><span>item text 4</span>
</div>
<div class="item"><span>item text 5</span>
</div>
<div class="item"><span>item text 6</span>
</div>
</div>
</div>
JSFiddle Demo
As i understand you need something like following.
Use display:table-cell will solve your issue:
#left, #right {
display: table-cell;
}
Check Fiddle Here.
Give width: 100%; to .right wills stick right div to right align.
Check Updated Fiddle Here.
Use the flexbox model display: flex for your #right element.
#outer {
overflow: hidden;
}
#left {
float: left;
min-width: 66%;
background-color: #69f;
}
#right {
min-width: 34%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: stretch;
}
.item {
display: inline-block;
}
See example here: http://jsbin.com/qalilu/3/edit. I've added a min-width constraint, which may be useful.
See browser support: http://caniuse.com/#search=flexbox
And a guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/