I'm facing this issue in a menu bar.
I need to align the text with the center of the icon.
Code:
<table id="cssTable">
<thead>
<tr>
<th>
<i style=" text-align: center;vertical-align: middle;" class="icon s20 {{node.icon}}" ng-if="node.icon"></i>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span style=" text-align: center;vertical-align: middle;" class="title" translate="{{node.translate}}" flex>{{node.title}}</span>
</td>
</tr>
</tbody>
</table>
But it's not working. How do I use css to style the center the text.
To fix the issue at hand, remove the text-align: center from the span and instead add it to the parent elements, th and td.
However, your code is showing some other issues that I'd like to point out.
Why the table?
You are using a table for your menu. Unless you have a very specific, pressing reason to do so, you should not do this. The reason is that HTML is all about semantics, and it is not very semantic to make a menu a table - it simply isn't tabular data. The common practice is to use an unordered list (ul) instead.
Why the inline-styles?
There are three ways to apply CSS:
External stylesheet using <link>
<style></style> section within your <head>
Inline-styles (that's what you are using)
Now, inline-styles will override rules from external stylesheets or the style element. They also violate the idea of separating content and presentation. They are therefore considered bad practice, unless you have a specific reason to use them.
Putting it all together
I therefore suggest the following:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
width: 108px;
}
li {
color: #fff;
text-align: center;
background-color: #2d323e;
background-repeat: no-repeat;
background-position: center 20%;
}
li.customers,
li.user {
background-image: url(http://via.placeholder.com/20x20);
}
li a {
display: block;
width: 100%;
height: 94px;
padding-top: 60%;
color: inherit;
text-decoration: none;
font-family: sans-serif;
font-size: 9pt;
font-weight: bold;
}
<ul>
<li class="customers">Customers</li>
<li class="user">User</li>
</ul>
it's because you're adding text-align to the span property, and I can understand why you would try to add it to the span. But text-align is best used on the parent element, to essentially align the children elements.
You would do something like this (not meant to be anything like your code, just an example of how-to-use):
html:
<div id="myDiv">
<img src="img1.png" class="img" />
<p>My Text</p>
</div>
css:
#myDiv {text-align: center;}
not whenever a div with an id of myDiv is loaded it will center-align all child elements inside the div.
In your case, you need to add it to the table <td>/<th> that holds the text you wish to align. E.g.
td, th {text-align: center}
As an alternative, using flexbox and absolute positioning of the icon.
ul {
list-style: none;
width: 5em;
margin: 0;
padding: 0;
display: flex;
}
li {
position: relative;
text-align: center;
padding-top: 1.5em;
min-width: 5em;
background-color: blue;
color: white;
cursor: pointer;
}
li:not(:first-child) {
margin-left: .1em;
}
li:hover {
background-color: lightblue;
}
li:before {
font-family: FontAwesome;
position: absolute;
width: 1em;
top: 0.3em;
left: calc(50% - .5em);
}
.customers:before {
content: "\f0c0";
}
.user:before {
content: "\f2c0";
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ul>
<li class="customers">Customers</li>
<li class="user">User</li>
</ul>
You need to add text-align:center to the th and td
<th style="text-align: center;"></th>
<td style="text-align: center;"></td>
Related
I want the hover functionality of the nav bar to extend the full height of the header parent element.
I believe this is currently not doing this because the anchor tag is an inline element. If I add display: inline-block to the CSS for the header .nav a selector, this works as I want it to BUT then does not honour the direction property I set in the header .nav selector and reverses the order of the elements.
Can anyone tell me why this would be?
I have researched this and on the MDN site for the direction CSS property it says
For the direction property to have any effect on inline-level
elements, the unicode-bidi property's value must be embed or override.
if i add the unicode-bidi CSS property:
with the embed value, nothing happens
with the bidi-override value, the words are reversed in place.
Thanks for your patience, I am a noob at all this.
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header {
height: 7vh;
width: 100vw;
background-color: #D1C4E9;
line-height: 7vh;
}
header .nav {
margin-right: 3vw;
direction: rtl;
}
header .nav a {
//display: inline-block;
font-size: 1.25em;
padding: 0 2vw;
text-decoration: none;
color: #6A1B9A;
}
header .nav a:hover {
background-color: #6A1B9A;
color: #D1C4E9;
}
<header>
<div class='nav'>
<a href='#'>Home</a>
<a href='#'>Products</a>
<a href='#'>Services</a>
<a href='#'>About</a>
</div>
</header>
then does not honour the direction property I set in the header .nav selector and reverses the order of the elements.
This is the intended result when changing the direction and having inline-block elements. The order will get switched.
The behavior with text is not exactly the same and here the unicode-bidi play it roles. Basically when a browser will change the direction, it will not break down the text and change the order of each character. this will be done only if you change unicode-bidi
normal
The element does not open an additional level of embedding with respect to the bidirectional algorithm. For inline elements, implicit1 reordering works across element boundaries.
bidi-override
This means that inside the element, reordering is strictly in sequence according to the 'direction' property; the implicit1 part of the bidirectional algorithm is ignored.
Here is an example to better understand and to see the difference when having extra wrapper:
span {
border:1px solid;
}
div {
margin-top:10px;
}
<div style="direction:rtl;">lorem ipsum text</div>
<div style="direction:rtl;">lorem <span>ipsum text</span></div>
<div style="direction:rtl;">lorem <span style="display:inline-block">ipsum text</span></div>
<div style="direction:rtl;unicode-bidi:bidi-override">lorem ipsum text</div>
<div style="direction:rtl;unicode-bidi:bidi-override">lorem <span>ipsum text</span></div>
<div style="direction:rtl;unicode-bidi:bidi-override">lorem <span style="display:inline-block">ipsum text</span></div>
1The algorithm consists of an implicit part based on character properties, as well as explicit controls for embeddings and overrides. CSS 2.1 relies on this algorithm to achieve proper bidirectional rendering. The 'direction' and 'unicode-bidi' properties allow authors to specify how the elements and attributes of a document language map to this algorithm.
Reference: https://www.w3.org/TR/CSS2/visuren.html#direction
All the above is a bit complicated and the use of direction is not the way to go. You can either consider text-align with inline-block:
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header {
height: 7vh;
width: 100vw;
background-color: #D1C4E9;
line-height: 7vh;
}
header .nav {
margin-right: 3vw;
text-align:right;
}
header .nav a {
display: inline-block;
font-size: 1.25em;
padding: 0 2vw;
text-decoration: none;
color: #6A1B9A;
}
header .nav a:hover {
background-color: #6A1B9A;
color: #D1C4E9;
}
<header>
<div class='nav'>
<a href='#'>Home</a>
<a href='#'>Products</a>
<a href='#'>Services</a>
<a href='#'>About</a>
</div>
</header>
Or use flexbox to easily control alignment:
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header {
height: 7vh;
width: 100vw;
background-color: #D1C4E9;
line-height: 7vh;
}
header .nav {
margin-right: 3vw;
text-align:right;
display:flex;
justify-content:flex-end;
}
header .nav a {
font-size: 1.25em;
padding: 0 2vw;
text-decoration: none;
color: #6A1B9A;
}
header .nav a:hover {
background-color: #6A1B9A;
color: #D1C4E9;
}
<header>
<div class='nav'>
<a href='#'>Home</a>
<a href='#'>Products</a>
<a href='#'>Services</a>
<a href='#'>About</a>
</div>
</header>
In my mobile theme I have been playing around with the CSS of my tables to make the information clearer and easier to understand for my users.
In column 1 I have a network logo, in column 2 I have text which I have formatted both as (display:table-cell) and given them a border of 1px.
The problem is I can't get them to vertically align exactly I have attached an image to show you exactly what I mean.
http://pasteboard.co/1vII00Yg.png
As its an image in column one when I first inserted it in there it was messed up so I did this in the CSS to try to align it to the adjacent text cells.
HTML
<td class="network-cell">
<center><img alt="EE" src="/wp-content/themes/wootique-child/images/network-logos/ee-logo.png" class="network-logo"></center>
</td>
CSS
.network-logo {
min-height: 30px;
min-width: 30px;
position: relative;
top: 5px !important;
}
.network-cell > center {
border-bottom: 1px solid gainsboro;
border-right: 1px solid gainsboro;
border-top: 1px solid gainsboro;
height: 39px;
position: relative;
top: 5px;
width: 100%;
}
The adjacent cells are formatted differently because they don't contain an image.
For example.
HTML
<td>
<p id="minutes" align="center">300</p>
</td>
CSS
#minutes, #texts, #data, #infinity {
background-color: ghostwhite;
border-color: gainsboro;
border-style: solid;
border-width: 1px;
color: black !important;
font-size: 13px;
font-weight: normal;
line-height: 3em;
padding-left: 1px;
padding-right: 1px;
width: 100%;
}
How can I make the column 1's border align exactly to the border of column 2,3 + 4?
I know I need to change these to classes also - to view the problem scroll to the bottom of the website and select view mobile version.
http://mobilereactor.co.uk/shop/mobile-phones/samsung-galaxy-j1-white-deals/
This question is way more complex than the question you highlighted it
to be a duplicate of, the rules are different and we are talking about
aligning objects formatted as table cells not table cells themselves!
Replace all the id= with class=, as id shouldn't be duplicated. Just remove the <tbody> structure there and replace with the following:
.row {font-family: 'Open Sans', 'Segoe UI', sans-serif; font-size: 10pt;}
.row > div {display: inline-block; vertical-align: middle; height: 40px; background: #f5f5f5; border: 1px solid #ccc; line-height: 40px; padding: 0 10px;}
.row .network-cell {background: #fff; padding: 0;}
.row img {display: inline-block; line-height: 1; vertical-align: middle;}
<div class="row">
<div class="network-cell">
<img class="network-logo" src="http://mobilereactor.co.uk//wp-content/themes/wootique-child/images/network-logos/three-logo.png" alt="Three" />
</div>
<div class="minutes">100</div>
<div class="infinity">unltd*</div>
<div class="data">500MB</div>
</div>
Preview
Try border-collapse: collapse on each offending element. I believe that would be <center> and <img>. border-spacing: 0 may be of use as well. Keep in mind that your metro stylesheet reset the border-collapse: separate, so either place the styles in a <style> block with !important, or use inline, or better yet, assign classes.
With minimal effort:
.network-cell > center {
...
...
top: 6px;
...
...
}
But use table for alignment isn't so good, in this case better div with display: inline-block, and the tag center is deprecated.
Is there a way to display a line next to a header using CSS? Here's an image of what I'm talking about:
I could do it with a static background image, but that'd require custom CSS for every heading. And I could do some hacky stuff using :after and background colors on the h1, but it wouldn't look right against a gradient background.
I'd like to do this with CSS, not JavaScript. If it doesn't work in older browsers, that's fine.
UPDATE:
In the past I've done something like this:
<h1><span>Example Text</span></h1>
h1 {background-image:url("line.png");}
h1 span {background-color:#FFF;dislpay:inline-block;padding-right:10px}
While that works, it's hacky, and it doesn't work well with gradient backgrounds, because the span has to have a solid background color.
What I'm really looking for is something like this:
<h1>Example Text</h1>
h1 {background-image:url("line.png");} /* but don't appear under the example text */
I misspoke about the :after thing in the original post, I was thinking of another issue I had in the past.
You could do something like the following:
HTML
<div class="border">
<h1>Hello</h1>
</div>
CSS
h1 {
position: relative;
bottom: -17px;
background: #fff;
padding-right: 10px;
margin: 0;
display: inline-block;
}
div.border {
border-bottom: 1px solid #000;
}
Here is the JsFiddle to the above code.
After doing some more research, I think I found the best solution:
h2 {
color: #F37A1F;
display: block;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 25px;
margin: 0;
text-transform: uppercase;
}
h2:after {
background: url("../images/h2.png") repeat-x center;
content: " ";
display: table-cell;
width: 100%;
}
h2 > span {
display: table-cell;
padding: 0 9px 0 0;
white-space: nowrap;
}
Modified from: How can I make a fieldset legend-style "background line" on heading text?
It still requires some extra markup, unfortunately, but it's the most minimal that I've found. I'll probably just write some jQuery to add the span automatically to the h2s.
Here is one way of doing it.
Start with the following HTML:
<h1>News<hr class="hline"></h1>
and apply the following CSS:
h1 {
background-color: tan;
display: table;
width: 100%;
}
.hline {
display: table-cell;
width: 100%;
padding-left: 20px;
padding-right: 20px;
border: none;
}
.hline:after {
content: '';
border-top: 1px solid blue;
width: 100%;
display: inline-block;
vertical-align: middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Dsa9R/
You can repurpose the hr element to add the line after the text.
The advantage here is that you don't have to wrap the text with some other element.
Note: You can rewrite the CSS selectors and avoid declaring a class name and save a bit of typing.
How can I align text so that some of it aligns to the left and some of it aligns to the right within the same line?
<p>This text should be left-aligned. This text should be right aligned.</p>
I can align all of the text to the left (or to the right), either directly inline, or by using a stylesheet -
<p style='text-align: left'>This text should be left-aligned.
This text should be right aligned.</p>
How can I align the corresponding text to the left and to the right, while keeping it on the same line?
<p style="text-align:left;">
This text is left aligned
<span style="float:right;">
This text is right aligned
</span>
</p>
https://jsfiddle.net/gionaf/5z3ec48r/
HTML:
<span class="right">Right aligned</span><span class="left">Left aligned</span>
css:
.right{
float:right;
}
.left{
float:left;
}
Demo:
http://jsfiddle.net/W3Pxv/1
If you don't want to use floating elements and want to make sure that both blocks do not overlap, try:
<p style="text-align: left; width:49%; display: inline-block;">LEFT</p>
<p style="text-align: right; width:50%; display: inline-block;">RIGHT</p>
An answer using css flex layout and justify-content
p {
display: flex;
justify-content: space-between;
}
<p>
<span>This text is left aligned</span>
<span>This text is right aligned</span>
</p>
HTML FILE:
<div class='left'> Left Aligned </div>
<div class='right'> Right Aligned </div>
CSS FILE:
.left
{
float: left;
}
.right
{
float: right;
}
and you are done ....
While several of the solutions here will work, none handle overlap well and end up moving one item to below the other. If you are trying to layout data that will be dynamically bound you won't know until runtime that it looks bad.
What I like to do is simply create a single row table and apply the right float on the second cell. No need to apply a left-align on the first, that happens by default. This handles overlap perfectly by word-wrapping.
HTML
<table style="width: 100%;">
<tr><td>Left aligned stuff</td>
<td class="alignRight">Right aligned stuff</td></tr>
</table>
CSS
.alignRight {
float: right;
}
https://jsfiddle.net/esoyke/7wddxks5/
<h1> left <span> right </span></h1>
css:
h1{text-align:left; width:400px; text-decoration:underline;}
span{float:right; text-decoration:underline;}
Add span on each or group of words you want to align left or right.
then add id or class on the span such as:
<h3>
<span id = "makeLeft"> Left Text</span>
<span id = "makeRight"> Right Text</span>
</h3>
CSS-
#makeLeft{
float: left;
}
#makeRight{
float: right;
}
One example, only to show the richness of the solution from Benjamin Udink ten Cate in the answer above: "An answer using css flex layout and justify-content"
With this CSS:
p {
display: flex;
justify-content: space-between;
}
#connettore{
overflow: hidden;
margin: 0px 20px 10px 180px;
width: 250px;
align:left;
}
ol#connettore {
counter-reset: pin 6; /* Initiate a counter */
list-style: none; /* Remove default numbering */
/*list-style: decimal; /* Keep using default numbering for IE6/7 */
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
ol ol {
margin: 0 0 0 2em; /* Add some left margin for inner lists 20px*/
}
/*=========== Rectangle-shaped numbers ===========*/
.rectangle-list a{
position: relative;
display: block;
padding: .1em .2em .1em .8em;
margin: .5em 0 .5em 2.5em;
background: #ddd;
color: #444;
text-decoration: none;
transition: all .3s ease-out;
line-height: .1px;
}
.rectangle-list a:hover{
background: #eee;
}
.rectangle-list a:before{
content: counter(pin);
counter-increment: pin -1;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #fa8072;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.rectangle-list a:after{
position: absolute;
content: '';
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.rectangle-list a:hover:after{
left: -.5em;
border-left-color: #fa8072;
}
<ol id="connettore" class="rectangle-list" >
<li><p><span>BLU</span> <span>(SWDIO)</span></p> </li>
<li><p><span> MARRONE</span> <span>(SWDCLK)</span></p> </li>
<li><p><span>GIALLO</span> <span>(RESET)</span></p> </li>
<li><p><span>NERO</span> <span>(GND)</span></p> </li>
<li><p><span>BIANCO</span> <span>(VCC)</span></p> </li>
</ol>
This is the way I do pinout. :-)
If you're using Bootstrap try this:
<div class="row">
<div class="col" style="text-align:left">left align</div>
<div class="col" style="text-align:right">right align</div>
</div>
If you just want to change alignment of text just make a classes
.left {
text-align: left;
}
and span that class through the text
<span class='left'>aligned left</span>
Can someone help me to bring the arrows and the text on one line? (see image) The link tag should fill out the "th" (display:block).
HTML:
<th colspan="1" rowspan="1" class="ui-state-default">
example
<span class="ui-icon ui-icon-carat-2-n-s"></span>
</th>
CSS:
.ui-icon { width: 16px; height: 16px; background-image: url(../images/ui-icons_222222_256x240.png); }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
table#example th a {
display:block;
}
table#example th span {
float: right;
}
Can I may be realize that with the z-index CSS-attribute or something like that?
Try adding float left to the anchor:
table#example th a {
float: left;
display:block;
}
Are you sure you want to be using tables for this? If you're using tables purely for layout; don't. There's a few ways to do this using css:
Method 1:
HTML
<a class="link" href="http://www.example.com">example</a>
<span class="arrows"></span>
CSS
.link, .arrows {
float: left;
}
.link {
margin: 0px 10px; /* Spacing either side of link */
}
Method 2
HTML
<a class="link" href="http://www.example.com">example</a>
<span class="arrows"></span>
CSS
.link {
display: inline;
margin: 0px 10px; /* Spacing either side of link */
}
Change the CSS so that the <a> and <span> both float left:
table#example th a {
float: left;
}
table#example th span {
float: left;
}
Example here.