Sorry if the title is confusing. Hopefully, the image speaks for itself.
How can I use css to align the middle of the plus sign with the cross section of the x?
I know I could use something like position to nudge the x up a few pixels but I'm looking for a more consistent solution that works for several different screen sizes.
Heres the HTML. pretty-link is just a class with the cursor property set to hand and pointer
<span className='pull-right' style={{verticalAlign: 'middle', margin: 'auto', display: 'inline-block'}}>
<i className='fa fa-minus pretty-link' style={{verticalAlign: 'middle'}} onClick={e => toggleSystemUnit(e, index)}></i>
<i className='fa fa-times pretty-link' style={{verticalAlign: 'middle'}}></i>
</span>
Here is an example utilizing flex, does not work
http://jsfiddle.net/f1aejwwf/1/
Here is an example utilizing vertical-align, does not work
http://jsfiddle.net/hw4au2km/
In each example the x remains slightly below the +
Setting explicit widths for a wrapping span and floating each:
http://jsfiddle.net/u99q01t2/2/
In each of these examples the x seems to land slightly below the + so maybe it's a problem with fa?
For anyone coming here from Google, I do not think the fa-times icon can easily be aligned this way. All the above solutions work great for fa-plus and fa-minus but the fa-times icon is slightly off-center. Maybe someone can find a solution to that but for now I've switched to material icons for my project.
Those two images are horizontally aligned on the baseline, that's why you need to add some margin-bottom to the right one in order to make them horizontally centered, I think 2px do the job just fine:
.pretty-link {
cursor: pointer;
/* display: inline-block; not necessary */
vertical-align: middle;
}
.containerdiv {
display: flex; /* displays children inline */
justify-content: space-between; /* children are evenly distributed, first child is on the far left, last on the far right */
align-items: center; /* vertical alignment / centering */
margin: auto;
width: 70%;
padding: 5px 20px 5px 10px;
background-color: #eee;
border-bottom: 2px solid #ddd;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class='containerdiv'>
<h4>Detail</h4>
<span class='pull-right'>
<i class='fa fa-plus pretty-link'></i>
<i class='fa fa-times pretty-link' style="margin-bottom: 2px;"></i>
</span>
</div>
I created this snippet to help you with your question. As you can see the two blocks have different heights but giving them display: inline-block; and vertical-align: middle; they are vertically centered. Hope it helps :)
.element.first {
font-size: 65px;
background: blue;
margin-right: 10px;
}
.element.second {
font-size: 35px;
background: yellow;
}
.element {
display: inline-block;
vertical-align: middle;
}
<div class="container">
<div class="element first">First Icon</div>
<div class="element second">Second Icon</div>
</div>
Give your span class a width and height, then give your first <i> class float:left; and your second <i>classfloat:right; Both <i>must have width in px;
You can try this
<!DOCTYPE html>
<html>
<head>
<style>
.textpart {
margin-left: -6px;
}
</style>
</head>
<body>
<h1 class="text">+<span class="textpart">X</span></h1>
</body>
</html>
You can use flexbox or line-height . Flexbox is the greatest way if you are using autoprefixer and a task runner.
HTML
<h3>
Normal
</h3>
<span>
<i class="fa fa-minus pretty-link"></i>
<i class="fa fa-times pretty-link"></i>
Lorem ipsum
</span>
<hr>
<h3>
Flex
</h3>
<span class="container-flex">
<i class="fa fa-minus pretty-link"></i>
<i class="fa fa-times pretty-link"></i>
Lorem ipsum
</span>
<hr>
<h3>
Line Height
</h3>
<span class="container-line-height">
<i class="fa fa-minus pretty-link"></i>
<i class="fa fa-times pretty-link"></i>
</span>
CSS
.container-flex{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.container-line-height .fa{
vertical-align: middle;
display: inline-block;
}
Related
Firstly this is my second question in stackoverflow so dont be strict :( .
I am trying to create a template using html,css and sometimes bootstrap
In the footer i want to put text to the right like" terms and conditions,privacy" and in the left the social media icons.
I tried using columns but something was wrong or it does not work that way.
i am not in level 10 reputation so i hope the screenshot will help you understand...More info are that i want the whole template to be centered so i used a class with wrap.
https://i.stack.imgur.com/4fEIY.png
Basically you can just use display: flex and justify-content: space-between to achieve this.
/* Important things */
footer {
display: flex;
justify-content: space-between;
}
/* Decorative */
a {
text-decoration: none;
color: #555;
}
a + a {
margin-left: 10px;
}
footer {
background-color: #eee;
padding: 20px 40px;
}
<footer>
<section>
Terms and Conditions
Privacy
</section>
<section>
Follow
♠
♣
♥
</section>
</footer>
On Bootstrap 4, you can use float-right and float-left classes.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/js/all.min.js"></script>
<section>
Terms and conditions
Privacy
<div class="iconHere float-right">
Follow
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</section>
You can see the full documentation here.
You did not provide code but this is how you can do it.
There're many ways you could do it, you could use flex-box, or just use positions, or floats like I did below.
.footer{
width: 100%;
padding: 15px;
box-sizing: border-box;
min-height: 15px;
border: thin solid #d3d3d3;
}
.block{
display: inline-block; /* important */
}
.shift-right{
float: right; /* important */
}
<div class="footer">
<div class="block ">Left Content</div>
<div class="block shift-right"> Right Content</div>
</div>
This question may be a repeat! I'd like my footer to be at the bottom of the page, but not fixed there when I scroll. I'd like it to be like the footer on the bottom of this page Footer Example. This is my footer code so far, I've been using bootstrap 4 but I can't find a class to help me with what I want.
<footer>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-twitch"></i>
</footer>
I'm well aware of the bootstrap class
.fixed-bottom but like I said, I don't want the footer to stay when I scroll.
You can use pure CSS, like this:
footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #333;
color:#fff;
}
I think you may benefit from Flexbox, unless I'm misunderstanding what you're going for. Either way I believe Flexbox is the answer, just let me know if this works for you or we can explore a bit deeper.
Here is the CodePen: https://codepen.io/codespent/pen/eKqzjX
body {
display: flex;
height: 100%;
flex-direction: column;
}
.main {
flex: 1 0 auto;
border: 1px solid #000;
}
.wrapper {
display: flex;
justify-content: center;
}
footer {
flex: 0 0 auto;
display: flex;
color: #ccc;
margin: 1em;
padding: 1em;
width: 80%;
border-top: 1px solid blue;
justify-content: center;
}
footer i {
padding: 1em;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<body>
<div class="main">
<h1>Hello Flex</h1>
<p>This is Flexbox</p>
<h1>Hello Flex</h1>
<p>This is Flexbox</p>
</div>
</body>
<div class="wrapper">
<footer>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-twitch"></i>
</footer>
</div>
So what's important here?
We're making the body of our document a Flexbox container to allow our inner elements to be flex items.
We're setting our flex-direction to column to flow vertically like our traditional doc flow.
We're giving our main container a flex-grow value of 1 to fill all unoccupied space.
We're giving our footer a flex-basis of auto, but also making it a flex container to make our links align horizontally effortlessly with space to work with.
please refer to my answer here : footer stays at bottom - stackoverflow
It is simple and will solve your issue, even if you are not using bootstrap
This question already has answers here:
How do you make div elements display inline?
(20 answers)
Display Images Inline via CSS
(3 answers)
How to make the <img> tags line up horizontally in the div?
(5 answers)
How to put img inline with text
(3 answers)
Closed 5 years ago.
Im just having a frustrating time trying to emulate this - where the arrows function as buttons and text sits below the img -
For CSS, Ive tried as other questions suggest:
.ico-selector {
display: inline-block;
width: 123px;
float: left;
}
Example
.ico-selector {
display: inline-block;
width: 123px;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="ico-selector">
<i class="fa fa-chevron-left"></i>
<img src="https://d1j8pt39hxlh3d.cloudfront.net/development/emojione/2.2/843/2270.svg" />
<p>My Icon</p>
<i class="fa fa-chevron-right"></i>
</div>
but they remain vertically stacked. How can I do this?
You can simply do this :
.ico-selector {
width: 123px;
text-align: center;
display: inline-block;
}
/*adjust these values as you need*/
.ico-selector img {
width: 65%;
margin: 0 5px;
}
.ico-selector>* {
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="ico-selector">
<i class="fa fa-chevron-left"></i>
<img src="https://d1j8pt39hxlh3d.cloudfront.net/development/emojione/2.2/843/2270.svg" />
<i class="fa fa-chevron-right"></i>
<p>My Icon</p>
</div>
I assume your ico-selector box has fixed dimensions. Why not just position the chevrons absolutely within that box?
.ico-selector {
position:relative;
display: inline-block;
width: 123px;
}
.fa-chevron-left{
position: absolute;
left:0;
top: 50%;
}
.fa-chevron-right{
position: absolute;
right:0;
top: 50%;
}
Its a rather rough example but it illustrates the idea.
You can use divs to surround each part of your icon selector like this:
.ico-selector {
width: 123px;
height: 200px;
line-height: 200px;
}
.left-arrow, .icon, .right-arrow {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="ico-selector">
<div class="left-arrow">
<i class="fa fa-chevron-left"></i>
</div>
<div class="icon">
<img src="https://d1j8pt39hxlh3d.cloudfront.net/development/emojione/2.2/843/2270.svg" />
<p>My Icon</p>
</div>
<div class="right-arrow">
<i class="fa fa-chevron-right"></i>
</div>
</div>
I wanna position the icon to be on top of the sentence and both centered within bootstrap column. I tried changing the position and display in css for both the paragraph and icon but it doesnt work.
Right now it looks like this
I want it to be like this
Here's the code
#home-info {
width: 500px;
height: 200px;
background-color: rgba(0,0,0,0.7);
top: 550px;
z-index: 1;
position: absolute;
}
.col-md-3 {
height: 100px;
background-color: #1e2c38;
text-align: center;
color: white;
border-bottom: 1px solid white;
border-top: 1px solid white;
}
.col-md-4 {
height: 300px;
text-align: center;
background-color: #1b2328;
}
.col-md-3 p {
position: relative;
width: 300px;
text-align: center;
}
<div class="container-fluid"> <!-- HOME INFO -->
<div class="row">
<div class="col-md-3" id="navy2">
<div class="content-container">
<i class="fa fa-newspaper-o fa-3x" aria-hidden="true"></i>
<p>Learn more about our recent events and news!</p>
</div>
</div>
<div class="col-md-3" id="navy3">
<div class="content-container">
<i class="fa fa-calendar fa-3x" aria-hidden="true"></i>
<p>Stay up to date! Get the school's calendar here!</p>
</div>
</div>
<div class="col-md-3" id="navy2">
<div class="content-container">
<i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i>
<p>Like and connect with us via Facebook!</p>
</div>
</div>
<div class="col-md-3" id="navy3">
<div class="content-container">
<i class="fa fa-youtube fa-3x" aria-hidden="true"></i>
<p>Learn more about us through our videos!</p>
</div>
</div>
</div> <!-- ROW -->
Thanks!
You can center it by making the inner p a display:block element and use margin: 0 auto to center it...
.col-md-3 p {
position: relative;
width: 300px;
display: block;
margin: 0 auto;
}
http://www.codeply.com/go/kFJwok7k0T
However, because you have the 300px set on the .col-md-3 p, the text will get cut-off at smaller widths. It would be better to not set any specific width on the .col-md-3 p so that it's responsive.
You may use <br> tag to separate the icon and text. And since you are using font-awesome icons, you use text-align: center to center both the icon and the text.
I'm trying to display an icon (font awesome) to the left of a heading, which currently works when the heading is on a single line, but the alignment gets messed up when the heading goes onto a second line.
What it currently looks like:
What I want:
Here's the simplest form of what I have (fiddle):
<div>
<h1><i class="fa fa-file-text fa-fw fa-lg"></i>Multi-line Title</h1>
</div>
I've tried separating the icon into a separate h1, then float or inline display each of those, but because it's multi-line text none of that has worked.
What's a clean way to get this alignment I'm looking for?
A little late to the party, but if anyone else is having the same issue - this is an easy fix with CSS Flexbox (which is a new...ish style, but by this point is pretty robustly supported).
(Note for code below: You can wrap the <i> in a <div>, or something else if necessary, but I would advise against including a second <h1> tag as that could cause SEO issues. Basically, you need the .wrapper class with two children - one as the icon (or a div containing the icon), and one as the header.)
First, the new HTML:
<div>
<i class="fa fa-file-text fa-fw fa-lg"></i>
<h1>Multi-line Title</h1>
</div>
And the new CSS:
div {
display: flex;
align-items: center;
}
Note: align-items: center; sets vertical alignment. This can also be flex-start (top-aligned) or flex-end (bottom-aligned) as desired.
Add this
div h1 {
display: inline-block;
position: relative;
padding-left: 55px;
vertical-align: middle;
}
div h1 i {
position: absolute;
left: 0;
top: 50%;
margin-top: -10px; // half height of icon
}
Fiddle
In this case, Using absolute positioning on the icon solves the problem. Besides, adjust it's top margin to align with the title text.
Fiddle: https://jsfiddle.net/0fadtcm7/
div h1 i {
position: absolute;
margin-left: -55px;
margin-top: 3px;
}
div h1 {
padding-left: 55px;
}
Just found an easier way to solve this.
HTML:
<div>
<h1 class="icon">
<i class="fa fa-file-text fa-fw fa-lg"></i>
</h1>
<h1>Multi-line Title</h1>
</div>
CSS:
div {
width: 225px;
background-color: #ccc;
padding: 10px;
}
.icon {
display: inline;
}
h1 {
display: inline-block;
vertical-align: middle;
width: 55%;
}
The most important point is to change the width to a suitable value.
Working JSFiddle here: https://jsfiddle.net/hfqoj5d9/