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>
Related
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>
I have been wrestling with lining up an image icon (not a font icon) with a heading and text.
I have found some good examples of how this is done but not with a heading and if so it was using a fontawesome icon which I am trying to avoid.
.soccer-icon {
width: 50px;
}
.icon-header {
font-size: 18px;
line-height: 32px;
display: block !important;
padding-right: 20px
}
.icon-area {
display: flex;
align-items: center;
}
<div class="icon-area">
<p>
<img class="soccer-icon" src="https://cdn1.iconfinder.com/data/icons/sports-balls-4/32/balls_filled_outline-01-512.png" />
</p>
<h3 class="icon-header">Paper Ballot Inspection</h3>
<p>A full count of the ballots, including scanning and visual inspection of all ballots.</p>
</div>
Here you go,
https://jsfiddle.net/2ro6dqay/
I have put both the headings in separate <div>'s and then styled them
You can wrap the <h3> and <p> elements in a parent <div> and make it a flexbox column layout so the text is stacked vertically. Then, remove the default margins from h3 and paragraph elements in that container so they are grouped more closely together.
With your existing align-items: center declaration on .icon-area, this seems to create the style you were going for.
.soccer-icon {
width: 50px;
}
.icon-header {
font-size: 18px;
line-height: 32px;
display: block;
padding-right: 20px
}
.icon-area {
display: flex;
align-items: center;
max-width: 80ch; /* for demo */
}
.column {
display: flex;
flex-direction: column;
}
.column h3,
.column p,
.icon-area p {
margin: 0;
}
<div class="icon-area"><p>
<img class="soccer-icon" src="https://cdn1.iconfinder.com/data/icons/sports-balls-4/32/balls_filled_outline-01-512.png" />
</p>
<div class="column">
<h3 class="icon-header">Paper Ballot Inspection</h3>
<p>A full count of the ballots, including scanning and visual inspection of all ballots. Some more text to occupy two lines.</p>
</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 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>
Pre History
I am building html form, with elements having multiple options ...., but instead of showing it as dropdown, i would like to show them as buttons without using any js, I removed buttons with label pointing to input checkbox.
Problem
I need label (or anchor or div) tag behave exactly like button tag without any extra wrapper tags, I googled all variation doesn't provide same result as native tag button.
<button class="button">
Text
<div>Small Text</div>
</button>
Solutions not work
line-height, padding does not provide same functionality, because button height/width and text length may vary. I tried special webkit style -webkit-appearance: button; no changes.
Mustery Flex
I tried flex
.button {
flex-wrap: wrap;
align-items: center;
justify-content: center;
display: inline-flex;
}
<div class="button">
Text
<div>Small Text</div>
</div>
but child div inside button not breaking/warping to new line.
p.s Environment tested, Google Chrome, Safari
I found solution using flex with flex-direction: column; so text and div treats like column items, here is code
label.button {
flex-direction: column;
justify-content: center; /* <-- actual veertical align */
display: inline-flex;
text-align:center;
}
JS Fiddle Demo
Does this does the job ?
div.button {
align-items: center;
text-align: center;
display: inline-block;
border: 1px solid black;
}
div.button div {
clear: both;
}
<div class="button">
Text
<div>Small Text</div>
</div>
Ghost element trick looks work well.
.wrap {
text-align: center;
background: #ededed;
margin: 20px;
}
.wrap:before {
content: '\200B';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centered-guy {
display: inline-block;
vertical-align: middle;
width: 300px;
padding: 10px 15px;
border: #777 dotted 2px;
background: #666;
color: #fff;
}
<div class="wrap" style="height: 512px;">
<div class="centered-guy">
<h1>Some text</h1>
<p>Bool!<br>Look at me, mama!</p>
</div>
</div>