I have an image and a hyperlink inside a div, but for some reason, the hyperlink is not center aligned with the image.
Here's my CSS
#loginb {
margin-top: 40px;
height: 50px;
left: -438px;
float:right;
position: relative;
display:block;
}
#loginb img {
padding-top: 10px;
}
#loginb a {
color: #fff;
line-height: 10px;
}
and here's the html
<div id="loginb">
<img src="icon.png" alt="login" />
Login
</div>
see this, hope you will find your solution.
<div>
<img style="width:50px;height:50px;vertical-align:middle" alt="vertical image">
<span style="color:red;">Check it.</span>
</div>
Related
I am trying to put a line of text underneath the first image in an horizontal scroll. However, each time I try, it inserts the text mid way down the page and doesn't line up with the image.
I have attached my code below. Would someone be able to help and let me know the best way to achieve the above.
Edit Please find an image attached of what I am trying to achieve.
Thank you in advance. Esmé
* {
margin: 0;
padding: 0;
line-height: inherit;
}
.horizontal_slider {
display: block;
width: 100%;
overflow-x: scroll;
padding: 0px;
box-sizing: border-box;
background-color: #fff;
line-height: 25em;
}
.horizontal_slider_video {
display: block;
width: 100%;
overflow-x: hidden;
padding: 0px;
box-sizing: border-box;
background-color: #fff;
line-height: 25em;
}
.horizontal_slider::-webkit-scrollbar {
display: none;
}
/* for ms*/
.horizontal_slider {
-ms-overflow-style: none;
}
.slider_container {
display: block;
white-space: nowrap;
}
.item {
display: inline-block;
margin-right: 10px;
}
.item img {
width: px;
height: 850px;
object-fit: cover;
}
<div class="slider_container">
<div class="horizontal_slider">
<div class="slider_container">
<div style="text-align: left">
<h2>Side by side sisters</h2>
</div>
<div class="item">
<img src="https://freight.cargo.site/t/original/i/0b6e5d416b8d2666e95ad95076f5a051e7c744345a0c66f43667f08f1a2619d6/0007-copy.jpg">
</div>
<div class="item">
<img src="https://freight.cargo.site/t/original/i/21fae0988d8a0ae94a7dabcf10286fd8fc6e0488a3801de8017c2932024f46bb/0008-copy.jpg">
</div>
<div class="item">
<img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg">
</div>
<div class="item">
<img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg">
</div>
<div class="item">
<img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg">
</div>
<img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg">
</div>
</div>
</div>
The semantically correct way to do this is to wrap each image in a figure element and include a figcaption for the text. So something like:
<figure>
<img src="image.jpg" alt="image descriptor">
<figcaption>The caption that goes below the image</figcaption>
</figure>
You will no doubt need to adjust the css to make this look correct.
I've been using bootstrap framework recently. I'm new to this framework.
so I'm trying to position an image next to some text in landing page. I use grid system of the bootstrap and it work. but when I come to push the image using position: absolute, and left:somePX, it make horizontal scroll and get out of the body of the page. what should I do to prevent this scrolling. I just want to cut the image and position it as I want.
Note: I've applied so many templates using only CSS with out bootstrap and I never get across on same problem.
thank you
here is my html code:
/* landing */
/*this is the image style*/
.landing {
padding-bottom: 100px;
margin-right: 0;
}
.landing .right .image {
position: relative;
}
.landing .right .image .back img {
position: absolute;
left: 100px;
}
.landing .right .image .mockups {
position: absolute;
top: -100px;
left: 100px;
}
/*this is text style I don't think the problem is here but I put it*/
.landing .left {
padding-top: 80px;
padding-left: 80px;
}
.landing .left h1 {
line-height: 1.3;
margin-bottom: 20px;
}
.landing .left p {
font-size: 15px;
margin-bottom: 20px;
}
.landing .left button {}
<div class="landing row">
<div class="col-md-6 left">
<div class="container">
<h1>Next generation digital banking</h1>
<p>Take your financial life online. Your Easybank account<br> will be a one-stop-shop for spending, saving,<br> budgeting, investing, and much more.</p>
<button class="btn linear" type="button">Request Invite</button>
</div>
</div>
<div class="col-md-6 right">
<div class="image">
<div class="back">
<img class="back-image img-fluid" src="images\bg-intro-desktop.svg" alt="">
</div>
<div class="front">
<img class="img-fluid mockups" src="images\image-mockups.png" alt="">
</div>
</div>
</div>
</div>
you can simply add to your body:
<style>
body{
overflow-x: hidden;
}
</style>
I have a problem..
I am trying to make my footer bar but it is not going very well.
The copyright logo, the year and my name are on the left and the social icons have to go to the right. I can't solve this problem! ;( I can't float it to the right.
If someone knows how it works, please react! :D
footer {
width: 100%;
height: 50px;
clear: both;
background-color: #303030;
color: #868686;
position: relative;
}
footer span {
display: table-cell;
vertical-align: middle;
height: 50px;
}
.footerwidth {
width: 80%;
margin: 0 auto;
}
.icons {
float: right;
width: 150px;
}
<footer>
<div class="footerwidth">
<span>© 2016 Jasper Mulder
<div class="icons">
<img src="../images/icons/facebook.png">
<img src="../images/icons/instagram.png">
<img src="../images/icons/linkedin.png">
</div>
</span>
</div>
</footer>
Thank you for helping me!
Change your HTML and put the social icons before the copyright span:
<footer>
<div class="footerwidth">
<div class="icons">
<img src="../images/icons/facebook.png">
<img src="../images/icons/instagram.png">
<img src="../images/icons/linkedin.png">
</div>
<span>© 2016 Jasper Mulder</span>
</div>
</footer>
Move your .icons div outside the <span> and also add float: left to the span:
footer {
width: 100%;
height: 50px;
line-height: 50px;
clear: both;
background-color: #303030;
color: #868686;
position: relative;
}
footer span {
display: table-cell;
vertical-align: middle;
height: 50px;
float: left;
}
.footerwidth {
width: 80%;
margin: 0 auto;
}
.icons {
float: right;
width: 150px;
}
<footer>
<div class="footerwidth">
<span>© 2016 Jasper Mulder</span>
<div class="icons">
<a href="#">
<img src="../images/icons/facebook.png">
</a>
<a href="#">
<img src="../images/icons/instagram.png">
</a>
<a href="#">
<img src="../images/icons/linkedin.png">
</a>
</div>
</div>
</footer>
I also added line-height: 50px; as a little bonus ;)
Here you go, there are many solutions.
footer span {
position:relative;
top:15px;
left:-110px;
height: 50px;
}
Do not use table for layout.
http://codepen.io/damianocel/pen/BjdWWq
Here is the jsFiddle for your problem.
Please go through it.
https://jsfiddle.net/dhqp3Ln5/
css should be:
.footerwidth {
width: 80%;
margin: 0px auto;
PADDING-TOP: 15PX;
}
footer span {
display: inline-block;
height: 50px;
}
.icons {
float: right;
HEIGHT: 50PX;
width: 150px;
}
HTML should be:
<div class="footerwidth">
<span>© 2016 Jasper Mulder</span>
<div class="icons">
<img src="../images/icons/facebook.png">
<img src="../images/icons/instagram.png">
<img src="../images/icons/linkedin.png">
</div>
</div>
Demo: https://jsfiddle.net/9n4cav1o/
I have a div with width: 180px; and height: 180px;.
How can I center a fontawesome icon horizontally and vertically inside the container?
Note: i may also add text below the icon
<div style="width:180px; height:180px; float:left;">
<i class="fa fa-search fa-4x"></i>
</div>
should look something like this:
Try this:
.centered{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.container{
width:100px;
height:100px;
}
On mobile.
You can do it like this
#search{
background: gray;
width:180px;
height:180px;
float:left;
line-height: 180px;
text-align: center;
vertical-align: bottom;
}
#search > p {
margin-top: -155px;
}
Working example http://jsfiddle.net/kasperFranz/h91p8w4e/3/ (using icon instead of fa in the example, but shouldn't affect the result.)
I'm probably too late here, but it's a common question, so here's a simple working idea, the interesting side of it is that it adapts to the container size:
span{
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
text-align: center;
width: 15px;
height: 15px;
display: block;
}
Asuming to my comment, here is a JSFIDDLE
Without setting relative or absolute
html
<div class="myDiv">
<div class="content_wrapper">
<!--i class="fa fa-search fa-4x">test</i-->
<i class="icon-search icon-4x"></i><br />
<span class="myText">Search</span>
</div>
</div>
css
.myDiv{
width: 180px;
height: 180px;
float: left;
background: #ccc;
text-align: center;
display: table;
}
.content_wrapper{
display: table-cell;
vertical-align: middle;
}
.myText{
font-weight: bold;
font-size: 20px;
}
CSS
/* This parent can be any width and height */
.block {
text-align: center;
background:#ccc;
margin-bottom:10px;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
HTML
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some text</h1>
<p>p1</p>
</div>
</div>
<div class="block" style="height: 200px;">
<div class="centered">
<h1>Some text</h1>
<p>p2</p>
</div>
</div>
<div class="block" style="height: 600px;">
<div class="centered">
<h1>Some text</h1>
<p>p3</p>
</div>
</div>
DEMO
Update 1:
DEMO
I know it's a bit late and you probably already figured this out.
I was able to achieve what you were looking for by wrapping the icon and text in a div then adding padding to that.
See the attached pen.
http://codepen.io/ForTheJim/pen/YPxveR
<p data-height="268" data-theme-id="0" data-slug-hash="YPxveR" data-default-tab="result" data-user="ForTheJim" class='codepen'>See the Pen <a href='http://codepen.io/ForTheJim/pen/YPxveR/'>Centering Icon Question</a> by Jim (<a href='http://codepen.io/ForTheJim'>#ForTheJim</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
Short way just add display: grid; place-items: center; to your div and your ready to go.
like this:
<div style="width:180px; height:180px; display: grid; place-items: center;">
<i class="las la-user-circle"></i>
</div>
How to display the image as vertical align in div container?
The image "setting.png" placed in last column in the code i attached. please advice solution please.
.table{
width: 100%;
margin: 20px 0px 20px 0px;
background-color: #EEEEEE;
}
.tableRow{
width: 100%;
clear: both;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #cccccc;
}
.tableCol{
float: left;
height: 40px;
line-height: 40px;
}
<div class="table">
<div class="tableRow">
<div class="tableCol" style="width:10%; text-align:center;">1</div>
<div class="tableCol" style="width:40%">Michael</div>
<div class="tableCol" style="width:40%">webexp#gmail.com</div>
<div class="tableCol" style="width:10%;">
<a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle" /></a>
</div>
</div>
</div>
Just add (space before a link)
<div class="table">
<div class="tableRow">
<div class="tableCol" style="width:10%; text-align:center;">1</div>
<div class="tableCol" style="width:40%">Michael</div>
<div class="tableCol" style="width:40%">webexp#gmail.com</div>
<div class="tableCol" style="width:10%;">
<a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle" /></a>
</div>
</div>
</div>
better solution:
add this to css:
img {
margin-top:10px;
}
Here, this should work:
Add this to your div which contains the image that should be centered.
display:table-cell;
vertical-align:middle;
This should center the image vertically no matter the dimensions of your div or the image that it contains.
You can do this with position: absolute; if you know the dimensions of the settings.png image (20px x 20px for this example).
Add class tableColSettings to the <a> around the settings image. Then add CSS;
.tableColSettings{
position: absolute;
display: block;
top: 50%;
left: 50%;
margin: -10px 0 0 -10px; /* Half image dimensions */
width: 20px;
height: 20px;
line-height: 0;
}
.tableColSettings img{
width: 100%;
}
The settings image will always stay in the center of the element, no matter the height. Here's a working fiddle: http://jsfiddle.net/384pa/
Hope this helps!
Css is having a tag name
"vertical-align" may be you will get your solution