Got two buttons that I want to have an icon and text in.
<a href="#">
<div class="button">
<i class="flaticon-tools6"></i>
<p>View all services</p>
</div>
</a>
<a href="#">
<div class="button">
<i class="flaticon-phone16"></i>
<p>Get a quote</p>
</div>
</a>
Here's the CSS
.button .flaticon-phone16,
.button .flaticon-tools6 {
font-size: 30px;
line-height:42px;
}
.button p {
display: inline;
line-height:42px;
margin: 0px;
}
.button {
font-size:15px;
font-weight:bold;
font-style:normal;
line-height: 42px;
height:42px;
width:100%;
text-decoration:none;
text-align:center;
padding: 0;
}
I removed the styling stuff from the button class. Currently they are not vertically centered, as visible in this screenshot.
Does anyone have any ideas?
remove the other line-hight and only add line-height with a display block on
.button p {display: block; margin: 0px; line-height: 42px; }
You can use display: table-cell combine with vertical-align: middle:
a {
width: 100%;
display: table;
}
.button .flaticon-phone16, .button .flaticon-tools6 {
font-size: 30px;
}
.button p {
margin: 0px;
}
.button {
display: table-cell;
font-size:15px;
font-weight:bold;
font-style:normal;
line-height: 42px;
height:42px;
width:100%;
text-decoration:none;
text-align:center;
padding: 0;
}
<a href="#">
<div class="button">
<i class="flaticon-tools6"></i>
<p>View all services</p>
</div>
</a>
<a href="#">
<div class="button">
<i class="flaticon-phone16"></i>
<p>Get a quote</p>
</div>
</a>
Related
I'm making a basketball website and I need to make some customized icons/buttons for links to different pages. I want to create a customized button that has a round picture with a picture below. Below it, I need text.
I don't know how to get the text and the image in the same icon.
Thanks.
Here's an example of what I want.
https://i.stack.imgur.com/5xgEo.png
you can do this by using HTML and CSS
<div class="container">
<img src="example.jpg" alt="img miss">
<div class="centered">Centered</div>
</div>
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Use anchor tag.
For making image and text a link
<a href ="link" >
<div class="class_name" >
<img src ="image_path" >
<p> text </p>
</div>
</a>
And for making text as a link
<a href ="link" > text </a>
When on use anchor tag <a> anything like image, text place between <a> & </a>, will be the link, which onclicking directs us to link mention in href
You can also try like this:
* {
boz-sizing: border-box;
}
body {
font-family: sans-serif;
background: #333;
padding: 20px;
}
.button {
background: #fff;
border-radius: 6px;
display: inline-block;
padding: 10px;
text-align: center;
max-width: 150px;
text-decoration: none;
}
.button figure {
margin: 0 0 15px;
}
.button figure img {
border-radius: 100%;
}
.button .text {
font-weight: bold;
text-transform: uppercase;
color: #1d368a;
margin: 0 0 15px;
font-size: 16px;
}
<a href="#" class="button">
<figure><img src="http://via.placeholder.com/100x100"></figure>
<div class="text">
Start Playing Basketball
</div>
</a>
You can use an image to it, or create a link..
see an example:
<a href=“test.html”>
<div>
<img src=“img.jpg” alt=“test”/>
<p>Link Test</p>
</div>
</a>
For valid HTML you have to pay attention to which elements you use. If you use an anchor tag, you can only use inline elements within it. But with CSS you can rephrase everything.
HTML:
<a class="btn">
<span class="btn-img"></span>
<span class="btn-text">Start playing basketball</span>
</a>
CSS:
.btn {
display:block;
padding:10px;
background-color:white;
border-radius:5px;
position:relative;
width:200px;
text-align:center;
}
.btn-img {
position:relative;
width:175px;
height:175px;
border-radius:50%;
display:block;
margin:0 auto;
background-color:red;
background-image:url(YOUR IMAGE);
}
.btn-text {
text-transform:uppercase;
font-size:12px;
}
Please check the link
https://jsfiddle.net/9wjcya06/
<a href ="#" class="btn-link" >
<div class="button" >
<img src ="https://i.pinimg.com/originals/40/97/c4/4097c40d4f2e1bbcc9044be03b5f730e.jpg" alt="img" >
<span> START PLAYING BASKET BALL </span>
</div>
</a>
see code bellow:
.img{
border-radius: 50%;
height: 120px;
width: 120px;
padding: 11px;
padding-bottom:0px;
}
.txt{
font-family: Georgia, serif;
text-align: center;
width: 85px;
color: blue;
padding-left: 34px;
font-size: 14px;
}
.btn{
background-color: white;
}
<button class="btn">
<img class="img" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
<p class="txt">strat playing basketball</p>
</button>
step 1.Add an icon library, such as font awesome.
step 2.append icons to HTML buttons
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<style>
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
}
/* Darker background on mouse-over */
.btn:hover {
background-color: RoyalBlue;
}
</style>
</head>
<body>
<p>Icon buttons with text:</p>
<button class="btn"><i class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-trash"></i> Trash</button>
<button class="btn"><i class="fa fa-close"></i> Close</button>
<button class="btn"><i class="fa fa-folder"></i> Folder</button>
</body>
</html>
I'm trying to align 4 elements in a row. Which I did using display:inline-block. I then combined them all into one element (front-page-post-info)so they would all be centered together. The problem is that I can't edit the margin-top: of each element individually. For example I want the read more button to be moved a little bit down below all of the images. So I put margin-top:20px; - however that just made all 4 of the elements move down. How can I edit each element individually, and not all of them combined together?
jsfiddle - https://jsfiddle.net/s8Lm3hou/2/
css and html
.front-page-post-info {
margin: 0 auto;
align-content: center;
align-items: center;
text-align: center;
}
.moretext {
display:inline-block;
text-transform: uppercase;
font-size: 18px;
margin-right:20px;
margin-top:20px;
}
.front-page-shop-image {
display:inline-block;
margin-right:20px;
}
.main-share-button {
display:inline-block;
margin-right:20px;
}
.comments {
display:inline-block;
}
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<div class="front-page-shop-image"><img src="http://knnindia.co.in/themes/frontend/images/icon_comment.gif" /></div>
<div class="main-share-button"><img src="http://knnindia.co.in/themes/frontend/images/icon_comment.gif" /></div>
<div class="comments"><img src="http://knnindia.co.in/themes/frontend/images/icon_comment.gif" /></div></div>
Add position:relative; and top:Xpx;
https://jsfiddle.net/scorpio777/s8Lm3hou/6/
<style>
.front-page-post-info {
margin: 0 auto;
align-content: center;
align-items: center;
text-align: center;
}
.moretext {
display:inline-block;
text-transform: uppercase;
font-size: 18px;
margin-right:20px;
position:relative;
top:20px;
}
.front-page-shop-image {
display:inline-block;
margin-right:20px;
position:relative;
top:10px;
}
.main-share-button {
display:inline-block;
margin-right:20px;
position:relative;
top:30px;
}
</style>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<div class="front-page-shop-image">
<img src="http://knnindia.co.in/themes/frontend/images/icon_comment.gif" />
</div>
<div class="main-share-button">
<img src="http://knnindia.co.in/themes/frontend/images/icon_comment.gif" />
</div>
<div class="comments">
<img src="http://knnindia.co.in/themes/frontend/images/icon_comment.gif" />
</div>
</div>
I am fairly new to CSS, but I want to know if there's an easier way to order these boxes, as I need something like a treemap, which links to a certain page, as you can see, have some animations. Currently I want to order this third box below the second one, and I don't know how, I'm trying with float and clear, but doesn't work for me. Excuse my beginner knowledge, but I'm learning. Also, if there's an easier way to do this, except manually like I'm doing, let me know please.
.cbox1 {
border:solid 2.5px white;
position:relative;
float:left;
z-index: 10;
}
.cboxtext {
text-align:center;
height:50%;
margin-top: 200px;
color:#fff;
}
.cboxpercentage {
text-align:center;
font-size:80px;
font-weight: bold;
color:#fff;
margin-top: -300px;
}
<a href="#">
<div class="cbox1 hvr-bounce-out" style="width:400px; height:400px;background-color:steelblue;">
<h2 class="cboxtext"> Company 1 </h2>
<h1 class="cboxpercentage"> 62,5% </h1>
</div></a>
<a href="#">
<div id="wrapper">
<div class="cbox1 hvr-sink" style="width:200px; height:200px; background-color:dodgerblue;">
<h2 class="cboxtext" style="font-size:24px; margin-top:90px;"> Company 2 </h2>
<h1 class="cboxpercentage"> 32,5% </h1>
</div></a>
<a href="#">
<div class="cbox1 hvr-float" style="width:200px; height:200px; background-color:blue;">
<h2 class="cboxtext"> Company 3 </h2>
<h1 class="cboxpercentage"> 5% </h1>
</div>
</a>
</div>
It's a new version of your code:
.cbox1,#wrapper {
position: relative;
}
.cbox1 a,#wrapper a {
text-decoration: none;
display: block;
width: 400px;
height: 400px;
}
.cbox1 a span,#wrapper a span {
display: block;
position: absolute;
width: 100%;
line-height: 400px;
}
.cbox1 a span.cboxtext,#wrapper a span.cboxtext {
line-height:30px;
}
.cbox1 {
width: 400px;
height: 400px;
float: left;
}
a .cboxtext {
top: 10px;
text-align:center;
color:#fff;
}
.cboxpercentage {
text-align:center;
font-size:80px;
font-weight: bold;
color:#fff;
}
#wrapper {
float: left;
width: 200px;
}
#wrapper a span {
line-height: 200px;
}
#wrapper .cbox1 {
width: 200px;
height: 200px;
}
#wrapper .cbox1 a {
width: 200px;
height: 200px;
}
#wrapper .cboxpercentage {
font-size:40px;
}
<div class="cbox1 hvr-bounce-out" style="background-color:steelblue;">
<a href="#">
<span class="cboxtext">Company 1</span>
<span class="cboxpercentage"> 62,5% </span>
</a>
</div>
<div id="wrapper">
<div class="cbox1 hvr-sink" style="background-color:dodgerblue;">
<a href="#">
<span class="cboxtext">Company 2</span>
<span class="cboxpercentage">32,5%</span>
</a>
</div>
<div class="cbox1 hvr-float" style="background-color:blue;">
<a href="#">
<span class="cboxtext">Company 3</span>
<span class="cboxpercentage">5%</span>
</a>
</div>
</div>
I have two DIVs. They each contain a SPAN with the same 16x16 background image and another SPAN with the same text. The only difference is the font sizes. How do I vertically align the centers of the icon and text even when the font sizes are different?
I basically want an element with an icon and text that vertically aligns no matter the font size. If there's a better way to do it than the multiple spans I'm using, that's fine too.
Here's a jsfiddle: https://jsfiddle.net/nup2pwqz/
<div class='divcontainer'>
<span class='span1'> <span>
<span class='span2 font1'>Header<span>
</div>
<div class='divcontainer'>
<span class='span1'> <span>
<span class='span2 font2'>Header<span>
</div>
.font1{
font-size: 12px;
}
.font2{
font-size: 18px;
}
.divcontainer{
display:inline-block;
position:relative;
text-align:center;
width:200px;
border:1px solid red;
}
.span1{
display:inline-block;
vertical-align:middle;
width:16px;
height:16px;
background: url('http://www.albany.edu/gsa/FileZilla-3.7.0.2/resources/16x16/cancel.png') no-repeat;
}
.span2{
padding-left:20px;
}
Example 1
.divcontainer{
display: inline-block;
position: relative;
text-align: center;
width: 200px;
border: 1px solid red;
}
.divcontainer span{
padding-left: 20px;
position: relative;
}
.divcontainer span:before{
content: '';
position: absolute; top: 50%; left: 0;
width:16px;
height:16px;
background: url('http://www.albany.edu/gsa/FileZilla-3.7.0.2/resources/16x16/cancel.png') no-repeat;
margin-top: -8px;
}
.font1{font-size: 12px;}
.font2{font-size: 18px;}
.font3{font-size: 28px;}
.font4{font-size: 48px;}
<div class='divcontainer'>
<span class='font1'>Header</span>
</div>
<div class='divcontainer'>
<span class='font2'>Header</span>
</div>
<div class='divcontainer'>
<span class='font3'>Header</span>
</div>
<div class='divcontainer'>
<span class='font4'>Header</span>
</div>
Example 2
.divcontainer{
display: inline-block;
position: relative;
text-align: center;
width: 200px;
border: 1px solid red;
}
.divcontainer > span{
display:inline-block;
vertical-align:middle;
}
.span1{
width:16px;
height:16px;
background: url('http://www.albany.edu/gsa/FileZilla-3.7.0.2/resources/16x16/cancel.png') no-repeat center center;
}
.span2{
padding-left:5px;
}
.font1{font-size: 12px;}
.font2{font-size: 18px;}
.font3{font-size: 28px;}
.font4{font-size: 38px;}
<div class='divcontainer'>
<span class='span1'></span>
<span class='span2 font1'>Header</span>
</div>
<div class='divcontainer'>
<span class='span1'></span>
<span class='span2 font2'>Header</span>
</div>
<div class='divcontainer'>
<span class='span1'></span>
<span class='span2 font3'>Header</span>
</div>
<div class='divcontainer'>
<span class='span1'></span>
<span class='span2 font4'>Header</span>
</div>
Use line-height. Add on the following to the .divcontainer block:
.divcontainer {
line-height: 16px;
}
You can use line-height instead of vertical-align, as below, (also you need to set value for background-image-postion)
.span1{
display:inline-block;
line-height:30px;
width:16px;
height:30px;
background: url('http://www.albany.edu/gsa/FileZilla-3.7.0.2/resources/16x16/cancel.png') no-repeat center;
}
I'm trying to align these divs correctly but they are repositioning themselves at will! I'm trying to align balance horizontally with history whilst transact is aligned vertically below balance.
Edit: .button style is irrelevant.
HTML:
<div id="main-page-content">
<div id="balance">
<u>Balances</u>
<div class="total-balance">
Total Balance:
</div>
<div class="a-balance">
Balance:
<a href="#" class="button"/>Deposit</a>
<a href="#" class="button"/>Withdraw</a>
</div>
<div class="b-balance">
Balance:
<a href="#" class="button"/>Deposit</a>
<a href="#" class="button"/>Withdraw</a>
</div>
</div>
<div id="transact">
</div>
<div id="history">
</div>
CSS:
#main-page-content {
max-width:960px;
margin:auto;
max-height: 500px;
padding-top:25px;
height:100%;
}
#balance {
font-family:Lato;
background-color:#00253F;
color:#FFFFFF;
font-size:24px;
padding-left:15px;
font-weight:bold;
padding-right:10px;
padding-top:15px;
height:130px;
width:52%;
float:left;
}
#transact {
font-family:Lato;
background-color:#00253F;
color:#FFFFFF;
font-size:24px;
padding-left:15px;
font-weight:bold;
padding-right:10px;
padding-top:15px;
height:130px;
width:52%;
float:left;
margin-top:10px;
}
#history {
background-color:#00253F;
width:32%;
height:300px;
float:right;
}
.total-balance {
padding-top: 8px;
font-family:Lato;
width:100%;
float: left;
font-size:14px;
height:16px;
}
.a-balance {
padding-top: 8px;
font-family:Lato;
width:100%;
float: left;
font-size:14px;
height:16px;
}
.b-balance {
padding-top: 8px;
padding-bottom:8px;
font-family:Lato;
width:100%;
float: left;
font-size:14px;
height:16px;
}
The result of the above code or Checkout This Demo
You just need to move history above transact in your html:
<div id="history">Hist
</div>
<div id="transact">Trans
</div>
#main-page-content {
max-width: 960px;
margin: auto;
max-height: 500px;
padding-top: 25px;
height: 100%;
}
#balance {
font-family: Lato;
background-color: #00253F;
color: #FFFFFF;
font-size: 24px;
padding-left: 15px;
font-weight: bold;
padding-right: 10px;
padding-top: 15px;
height: 130px;
width: 52%;
float: left;
}
#transact {
font-family: Lato;
background-color: #00253F;
color: #FFFFFF;
font-size: 24px;
padding-left: 15px;
font-weight: bold;
padding-right: 10px;
padding-top: 15px;
height: 130px;
width: 52%;
float: left;
margin-top: 10px;
}
#history {
background-color: #00253F;
width: 32%;
height: 300px;
float: right;
color: #fff
}
.total-balance {
padding-top: 8px;
font-family: Lato;
width: 100%;
float: left;
font-size: 14px;
height: 16px;
}
.a-balance {
padding-top: 8px;
font-family: Lato;
width: 100%;
float: left;
font-size: 14px;
height: 16px;
}
.b-balance {
padding-top: 8px;
padding-bottom: 8px;
font-family: Lato;
width: 100%;
float: left;
font-size: 14px;
height: 16px;
}
<div id="main-page-content">
<div id="balance">
<u>Balances</u>
<div class="total-balance">
Total Balance:
</div>
<div class="a-balance">
Balance:
Deposit
Withdraw
</div>
<div class="b-balance">
Balance:
Deposit
Withdraw
</div>
</div>
<div id="history">Hist
</div>
<div id="transact">Trans
</div>
</div>
This is due to the way that float is handled in the browser. I recommend if you want to do two columns to either do two wrapping colums around the entire document, or use a grid framework which may help you out in the long run.
I set up a jsfiddle to help illustrate this: https://jsfiddle.net/a01cv4ec/
HTML
<h1>Using floats</h1>
<div>
Only the items you want to distort should be floated...
</div>
<div id="main-page-content">
<div id="balance">
<u>Balances</u>
<div class="total-balance">
Total Balance:
</div>
<div class="a-balance">
Balance:
<a href="#" class="button"/>Deposit</a>
<a href="#" class="button"/>Withdraw</a>
</div>
<div class="b-balance">
Balance:
<a href="#" class="button"/>Deposit</a>
<a href="#" class="button"/>Withdraw</a>
</div>
</div>
<div id="transact">
</div>
<div id="history">
</div>
<h1>Using inline-block positioning</h1>
<div>
This personally is my favorite. Allows for positioning and responsiveness without css hacks to make sure sizes match up.
</div>
<div id="main-page-content-2">
<div id="col-1">
<div id="balance">
<u>Balances</u>
<div class="total-balance">
Total Balance:
</div>
<div class="a-balance">
Balance:
<a href="#" class="button"/>Deposit</a>
<a href="#" class="button"/>Withdraw</a>
</div>
<div class="b-balance">
Balance:
<a href="#" class="button"/>Deposit</a>
<a href="#" class="button"/>Withdraw</a>
</div>
</div>
<div id="transact">
</div>
</div>
<div id="column-2">
<div id="history-inline">
history
</div>
</div>
CSS
#main-page-content {
max-width:960px;
margin:auto;
max-height: 500px;
padding-top:25px;
height:100%;
}
#balance {
font-family:Lato;
background-color:#00253F;
color:#FFFFFF;
font-size:24px;
padding-left:15px;
font-weight:bold;
padding-right:10px;
padding-top:15px;
height:130px;
width:52%;
float:left;
}
#transact {
font-family:Lato;
background-color:#00253F;
color:#FFFFFF;
font-size:24px;
padding-left:15px;
font-weight:bold;
padding-right:10px;
padding-top:15px;
height:130px;
width:52%;
float:left;
margin-top:10px;
}
#history {
background-color:#00253F;
width:32%;
margin-left: 58%;
height:300px;
}
.total-balance {
padding-top: 8px;
font-family:Lato;
width:100%;
float: left;
font-size:14px;
height:16px;
}
.a-balance {
padding-top: 8px;
font-family:Lato;
width:100%;
float: left;
font-size:14px;
height:16px;
}
.b-balance {
padding-top: 8px;
padding-bottom:8px;
font-family:Lato;
width:100%;
float: left;
font-size:14px;
height:16px;
}
.main-page-content-2 {
width:100%;
}
.main-page-content-2 > div {
display:inline-block;
vertical-align:top;
color:#FFF;
}
.main-page-content-2 > div:first-child > div {
margin:2px;
}
#history-inline {
color:#FFF;
background-color:#00253F;
width:32%;
margin-left: 58%;
height:300px;
}
Basically the better way to handle those is either through controlled floats, or even nicer with inline-block positioning.
If the thing you want is to put the history to top of the parent div just because it is like a grid you should use history above your transact.
<div id="history">Hist
</div>
<div id="transact">Trans
</div>