I have the following code:
<td>
<a class="action--edit"><i class="icon-edit">Edit</i></a>
<a class="action--delete"><i class="icon-delete">Delete</i></a>
</td>
What I need:
Align each action anchor near each other in the center of td (done - keep this way)
The anchor text to go below the icon (i) and both be centered in anchor
What I tried:
[class^=table--] td a i { display: block }
Then I added span for text:
<td>
<a class="action--edit"><i class="icon-edit"></i><span>Edit</span></i></a>
<a class="action--delete"><i class="icon-delete"></i><span>Delete</span></a>
</td>
[class^=table--] td a i, [class^=table--] td a span {
display: block; }
The icon, i is a font icon:
[class*=" icon-"]:before {
font-family: "c" !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
In both cases, the anchors change on above the other, and not what I need:
anchor near each other
text under icon
I didn't tried float on anchor(a) because is in td an need to be centered
See below image:
Based on your image, something like this? Icons need to be blocks with auto margin so text can drop below.
html,body {
font: normal 100%/1 sans-serif;
}
.btn-icon {
display: inline-block;
width: 65px; /* Optional to keep buttons same size */
padding: 10px 0;
color: black;
text-decoration: none;
text-align: center;
}
.btn-icon i {
font-size: 28px;
display: block;
margin: 0 auto;
}
.btn-icon:hover {
color: blue;
background: #efefef;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<table>
<tr>
<td>
<i class="fa fa-pencil"></i> Edit
<i class="fa fa-trash"></i> Delete
</td>
</tr>
</table>
Please make anchor tag content to align center.
td {
min-width: 150px;
border: 1px dotted red;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
td i,
td span {
display: block;
}
td a {
text-align: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<table>
<td>
<a class="action--edit"><i class="fa fa-edit"></i><span>Edit</span></a>
<a class="action--delete"><i class="fa fa-trash"></i><span>Delete</span></a>
</td>
</table>
</body>
Related
How to display text from alt tag of from title tag on a button with CSS or with JavaScript?
Something like this
document.getElementById("myBtn").value="MyNewValue";
But how do I get the ID's for this buttons?
The buttons are social login buttons and you can see them here:
Virtual Forms Framework login
You have to add some javascript code to achieve this. Check below Snippet:
$('.the_champ_login_ul li').each(function(index) {
$('<span>' + $(this).find('i').attr('alt') + '</span>').insertAfter($(this).find('i ss'));
});
.theChampLogin {
width: 100%;
display: block;
}
.theChampFacebookBackground {
background-color: #3C589A;
}
.theChampFacebookLoginSvg {
background: url(//login.create.net/images/icons/user/facebook_30x30.png) left no-repeat;
}
.theChampTwitterLoginSvg {
background: url(//login.create.net/images/icons/user/twitter-b_30x30.png) left no-repeat;
}
.theChampLoginSvg {
height: 100%;
width: 35px;
display: inline-block;
}
.theChampLogin {
padding: 0!important;
margin: 2px;
height: 35px;
float: left;
cursor: pointer;
border: none;
}
ul.the_champ_login_ul li i span {
font-style: normal;
display: inline-block;
color: #fff;
line-height: normal;
vertical-align: top;
padding-top: 10px;
}
ul.the_champ_login_ul {
list-style: none!important;
padding-left: 0!important;
}
.theChampTwitterBackground {
background-color: #55acee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="the_champ_login_ul">
<li>
<i class="theChampLogin theChampFacebookBackground theChampFacebookLogin" alt="Login with Facebook" title="Login with Facebook" style="display: block;"><ss class="theChampLoginSvg theChampFacebookLoginSvg"></ss></i></li>
<li>
<i class="theChampLogin theChampTwitterBackground theChampFacebookLogin" alt="Login with Twitter" title="Login with Twitter" style="display: block;"><ss class="theChampLoginSvg theChampTwitterLoginSvg"></ss></i></li>
</ul>
img tags are self-closing <tag /> tag, and therefore they contain no "content". Since they do not contain any content, no content can be appended ::after or prepended ::before . its not possible to show the "alt" as "content" using css
This should be very simple, and apologies if it's a duplicate. I can't get some text in a span to vertically align beside an icon.
Example:
.box {
width: 100px;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a>
<span>Search</span>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
</div>
CSS I've tried:
Setting the span to display: inline-block and assigning padding and margin. This also moves the icon up.
Setting the link to position: relative and positioning the span. This causes the icon to move, as the span is now taken out of the flow.
Adjusting the line-height of the span. Again, this affects the icon.
Floating the span. This doesn't work.
Is there something I'm missing? I'm not very familiar with flex, would that be a solution? (Note I have to support very old browsers...)
Suggestions much appreciated!
Add following css:
.box a i,
.box a span {
display: inline-block;
vertical-align: middle;
}
.box {
width: 100px;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
.box a i,
.box a span {
display: inline-block;
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a>
<span>Search</span>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
</div>
Give the <i> an id (or class, I named it #k), then add this ruleset:
#k { vertical-align: middle; }
.box {
width: 100px;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
#k {
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a href='#/'>
<span>Search</span>
<i id='k' class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
</div>
Use CSS Flexbox. Apply display: flex property to .box a and use align-items: center (this will align your items vertically centered).
Have a look at the snippet below:
.box {
width: 30%;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
.box a {
display: flex;
align-items: center;
justify-content: center;
}
.box a span {
padding-right: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a>
<span>Search</span>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
</div>
Hope this helps!
You can easily adjust the positioning of your text in the span if you first make it a block element, and then apply a float. Once this is done, you can apply line-height as you initially mentioned, but without affecting the icon.
Here is a JSFiddle to show what to do. Incredible easy, and you don't have to touch your original CSS: https://jsfiddle.net/pgkjaa8c/
Solution using Floats
.box span {
display: block;
float: left;
line-height: 40px;
}
And you can change the float from left to right if you want the text on the right. Additionally, you can apply left and right padding to push the text away from the icon if you so desire: https://jsfiddle.net/rz4y4696/
.box span {
padding-left: 15px;
display: block;
float: right;
line-height: 40px;
}
Additionally, I advise against using flex. People are constantly pushing flex as a solution, but it eliminates many legacy browsers from support. This would be one of the more traditional ways of implementing this, with fully cross browser, and legacy browser support.
Solution without using Floats
If you want a solution that does not require floats, and will work for varying widths, then you'd have to remove the <i> tag and add your FontAwesome icon to your CSS. You can see the solution here: https://jsfiddle.net/rwkypte8/2/
You can get the value of the FontAwesome search icon here: http://fontawesome.io/icon/search/
The HTML and CSS is below:
HTML
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="box">
<a>
<span>Search</span>
</a>
</div>
CSS
.box {
width: 50%;
text-align: center;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
font-family: sans-serif;
cursor: pointer;
}
.box span {
display: block;
line-height: 40px;
text-align: center;
}
.box span:after {
padding-left: 20px;
font-family: 'FontAwesome';
font-size: 30px;
content: '\f002';
}
In my html page I have the following for the hover action on the navigation links.
<td class="menuNormal"
onmouseover="expand(this);"
onmouseout="collapse(this);"
width="130"
align="left">
<p><b>Vida de Mulher</b></p>
<div class="menuNormal">
<table class="menu" width="130">
<tr>
<!-- ... -->
And this is the css style sheet which is used for the hover action:
table.navbar {
font-size: 12pt;
margin: 0px;
padding: 0px;
border: 0px;
}
table.menu {
font-size: 11pt;
margin: 5px;
padding: 0px;
}
td.menuNormal {
padding: 0px;
color: #003399;
vertical-align: top;
background-color: #f6f6f6;
}
td.menuHover {
padding: 0px;
color: #003399;
width: 112px;
vertical-align: top;
background-color: lightblue;
}
This may be caused by a :hover effect in your css, or maybe removing the width of your td class .menuNormal in your html code will remove this moving effect, in last case if none of these works I suggest adding the same width to td.menuHover assuming this class was created for some hover effect on your td
td.menuHover {
padding: 0px;
color: #003399;
width: 130px; /* changing this value for the same as .menuNormal */
vertical-align: top;
background-color: lightblue;
}
I want to use CSS for buttons. For some buttons I use input elements, for other - links.
For buttons with short text I want to set min-width. For all buttons I want align text to center and set padding. Also somewhere on portal table layout is used.
Code below looks good in FF, but not in IE7:
Incorrect text align in inputs
Something bad happens with 'a' when it is in table
I know that there is problem with min-width in IE7 but it should works when 'display: inline-block' is set. Also I remember that padding is not included to width, but I can't explain what I see.
The only way I see is add class "btn-short" with fixed width and remove min-width from common button. Is it best solution or there are some fixes for min-width for IE7?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
input.btn {
height: 26px;
display: inline-block;
min-width: 80px;
overflow:visible;
}
a.btn {
height: 19px;
display: inline-block;
min-width: 60px;
background: none repeat scroll 0 0 #008000;
}
.btn {
background: none repeat scroll 0 0 darkblue;
color: #FFFFFF;
font-family: Verdana, Tahoma, sans-serif;
font-size: 14px;
padding: 4px 10px 3px;
text-align: center;
text-decoration: none;
border: none;
white-space: nowrap;
}
td {
border: 1px solid #000000;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<input type="submit" value="Search" class="btn"/>
</td>
<td> </td>
<td>
<input type="button" value="Clear" class="btn"/>
</td>
</tr>
</table>
<br/>
<input type="submit" value="Search" class="btn"/><br/><br/>
<input type="button" value="Clear" class="btn"/><br/><br/>
<input type="button" value="Change Default Values" class="btn"/><br/><br/>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Search
</td>
<td> </td>
<td>
Clear
</td>
</tr>
</table>
<br/>
Search<br/><br/>
Clear<br/><br/>
Change Default Values<br/><br/>
</body>
</html>
inline-block doesn't work on IE7, you need to trigger hasLayout by using zoom: 1; including display: inline to fake the display-inline effect:
input.btn {
height: 26px;
display: inline-block;
*display: inline;
*zoom: 1;
min-width: 80px;
}
a.btn {
height: 19px;
display: inline-block;
*display: inline;
*zoom: 1;
min-width: 60px;
background: none repeat scroll 0 0 #008000;
}
FYI: The star-hack is used for IE 6/7.
In this table, not just cell B has a heading and content, but also cells A and C.
My attempt to set the heading and the content using DIVs is only partially successful. font-weight is observed, but vertical-align is not. Why?
CSS
<style type="text/css">
td {
text-align: left;
}
.heading {
vertical-align: top;
font-weight: bold
}
.content {
vertical-align: middle;
}
</style>
HTML
<table width="300px" height="300px" border="1">
<tr>
<td rowspan="2">A</td>
<td>
<div class="heading">Heading of Cell B</div>
<div class="content">Content of Cell B</div>
</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
verticle align should be middle
verticle-align: middle;
This will place the text in the middle. Although you have to be aware that is places it in the middle on the line (not the container) so you need a line-height
line-height: xxx;
Or use div's and mimic a table: http://jsfiddle.net/rf2kC/
vertical align won't work on an element that is displayed in-line, like a div. you can put another table inside of your TD, or change your css to something like this:
<style type="text/css">
td {
text-align: left;
}
.heading {
position: relative;
top: 0;
background: blue;
height: 150px;
}
.content {
position: relative;
bottom: 0;
background: yellow;
height: 150px;
}
</style>
Try:
td {
text-align: left;
vertical-align:top;
}
.heading {
font-weight: bold;
}
.content {
margin: auto;
line-height: 200px;
}
http://jsfiddle.net/Xvx83/