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.
Related
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>
I want to align 4 text labels at the center with a margin of 5px.
The Code:
.header_section span {
width: 100%;
}
.header_section min {
padding-left: 30%;
padding-right: 5%;
}
.header_section consume {
padding-right: 5%;
}
<div class="header_section">
<span class="min">Min</span>
<span class="consume">Consumption</span>
<span class="avg">Average</span>
<span class="max">Max</span>
</div>
Do I need to add an id instead of a class?
Do I need to use the label tag instead of the span tag?
<style>
.header_section{
text-align:center;
}
.header_section span {
width: 100%;
}
.header_section min {
padding-left: 30%;
padding-right: 5%;
}
.header_section consume {
padding-right: 5%;
}
</style>
Below style can do this. It adds a left-margin of 5px to all spans except the first.
.header_section{
text-align:center;
}
.header_section span + span {
margin-left:5px;
}
A bit improved version is here in this fiddle
Do I need to add an id instead of a class?
No
Do I need to use the label tag instead of the span tag?
No. Labels are for texts associated to a input in a form. Maybe is a list, depending of the semactic meaning.
.header_section{
text-align:center;
}
.header_section li{
display:inline-block;
margin-right:5px;
}
<ul class="header_section">
<li>Min</li>
<li>Consumption</li>
<li>Average</li>
<li>Max</li>
</ul>
Well, I’m currently working on a coming soon site. So far everything has been great, but I seem to be running into one issue. For the life of me, I can't seem to get all the content vertically centered - I’ve read many pages on the Internet, but I can’t get any working.
The HTML:
<h1>Protean</h1>
<p>Your status bar, your way.</p>
<hr>
<a class="Button" href="#">
<i class="fa fa-spin fa-refresh"></i> Coming Soon</a>
<hr style="height:8pt; visibility:hidden;" />
The CSS:
h1 {
color: #ffffff !important;
font-size: 350%;
}
p {
color: #ffffff !important;
font-size: 19px;
}
body {
background:#4fb088 !important;
text-align:center !important;
}
.Button {
background-color:#5fc79c;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:HelveticaNeue-Medium;
font-size:16.5px;
padding:15px 35px;
text-decoration:none;
}
.Button:hover {
background-color:#6cd2a8;
}
.Button:active {
position:relative;
top:1px;
}
a:hover {
text-decoration:none;
color:white;
}
brbutton {
display: block;
margin: 10px 0;
}
hr {
height:1px;
visibility:hidden;
margin-bottom:-1px;
}
I dumped the files into a fiddle, here.
If you are willing to help, that’d be appreciated.
Edit: Felipe M has helped me resolve my issue.
<div class="container">
<div class="cent"></div>
</div>
html,body
{
height: 100%;
}
body
{
display: table;
margin: 0 auto;
}
.container
{
height: 100%;
display: table-cell;
vertical-align: middle;
}
.cent
{
height: 50px;
width: 50px;
background-color: black;
}
You could try this: http://jsfiddle.net/danield770/tVuS6/14/
From here: Center a div horizontally and vertically and keep centered when resizing the parent
Change about your needs.
By the way, there isn't a way to make content centered without using some divs elements.
If you want to learn more about that, I would like to recommend you some tips:
http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
http://css-tricks.com/centering-in-the-unknown/
Good luck!
I have the following month selector:
It has a left and a right button with the text of the current month inbetween.
As you can see it doesn't look ok.
HTML:
<div id="seletor">
<a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-w" href="#" id="subtrair">subtrair</a>
<div id="mescorrente"></div>
<a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-e" href="#" id="somar">somar</a>
</div>
CSS:
#subtrair, #mescorrente, #somar {
display:inline-block;
vertical-align:top;
}
#subtrair, #somar {
margin-top:2px;
}
#mescorrente {
font-size:20px;
text-transform:uppercase;
padding:0 6px; /* optional padding.. */
margin-bottom:10px;
white-space: nowrap;
}
I tried all sorts of options in the display settings, like display:table and display:inline but it did not work.
In Chrome Dev Tools, if I uncheck and check again display:inline-block; it works!
What is wrong with this code?
Change the CSS for #mescorrente.
#mescorrente {
min-width: 200px;
text-align: center;
}
You can use this:
<a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-e" href="#" id="somar" style="float:right;">somar</a>
or
#somar {
margin-top:2px;
float:right;
}
but as long as you use px in your parameters, if the above ways does not help, you can set the distance form the left side like this:
#somar {
margin-top:2px;
left: 150px;
}
Just a slightly different approach - floating the three components left inside the div, then positioning the div - FIDDLE.
Did you want to do anything more with it?
CSS
#seletor {
width: 300px;
margin: 30px auto;
}
#subtrair, #mescorrente, #somar {
float: left;
vertical-align: top;
margin-left: 10px;
}
#subtrair, #somar {
margin-top:2px;
}
#mescorrente {
font-size: 20px;
text-transform: uppercase;
padding:0 6px; /* optional padding.. */
margin-bottom: 10px;
white-space: nowrap;
}
You have two options that I see here. Either you can create multiple div elements and display them inline, or you could use
<span>
element, as it is intended to display elements inline natively.
http://www.w3schools.com/tags/tag_span.asp
I would recommend using the span element, as I've had good success using this method, so long as you want them truly inline and not staggered/relatively aligned via script.
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>