I have some text that is inside a span element and I'd like to left-align it instead of the way it is now which is centered. I tried making a margin to the right and text center with CSS but that didn't work. Can you tell me how to do it? The text that I want to the left is "(Jag arbetade: 4-6 timmar/vecka)" and now it is rendered centered if you look at my fiddle
The code that I'd like to change is
<div id="i4c2" class="artBaseRow">
<div id="i4_tbl_11" class="artWrapper">
<table class="srtbl" cellpadding="2" cellspacing="0" summary="">
<caption><b>Vad var det bästa med kursen?</b></caption>
<tbody>
<tr class="srtbl-h1">
<th class="srtbl-qt">
<div>
<br /> <span>(Jag arbetade: 4-6 timmar/vecka)</span>
</div>
</th>
</tr>
</tbody>
</table>
</div>
</div>
So that the text "(Jag arbetade..." is aligned to the left alongside the heading. How can I do that?
Where it comes from...
You have put your text inside a table heading <th> element. It's standard browser behaviour to apply font-weight: bold; text-align: center; on <th> in the so-called user-agent style sheet.
... and how to solve it.
You need to specify what you want to override this behaviour, for example like this:
th {
text-align: left;
}
the thing is the span elements has display: inline so its width is exactly the same as the text and like some of its parent has text-align: center, that makes is positioned in the center, so by doing only text-align: left doesn't works so you have to change its to display: block and then text-align: left
to clarify:
span-element{
display: block;
text-align: left;
}
you can do too:
span-element{
display: inline-block;
width: 100%;
text-align: left;
}
Add this css for srtbl-qt class (try put it at the end of CSS file)
.srtbl-qt {
text-align: left;
}
Also I don't know why you need div and break and span elements around that text, but it can be removed (hint: th {padding-top: 10px;})
Add text-align: left; to this class
.reportPage .srtbl .srtbl-h1 th, .reportPage .srtbl .srtbl-h1 td{
text-align: left;
}
Related
This question is already on stackoverflow. But the solutions are not working for me. Actually I'm working on an Angular project. I want to align Mode of comparison and the corresponding Dropdown in the middle with respect to each other. Here is the widget that I'm creating. I've clearly marked that part in the image:
Here is my HTML:
Note: pt-label, dls-combobox and dls-option are my custom made angular components.
<table>
<tbody>
<tr class="my-row">
<td class="first-col1">
<div class="comparing-switch1">
<pt-label>Mode of comparison </pt-label>
</div>
</td>
<td class="second-col1">
<div class="comparing-label1">
<dls-combobox placeholder="Time average">
<dls-option>
<pt-label>Time average</pt-label>
</dls-option>
</dls-combobox>
</div>
</td>
</tr>
</tbody>
</table>
and here is my CSS:
.my-row {
background: cornflowerblue;
}
.first-col1 {
background: magenta;
width: 50% !important;
}
.second-col1 {
width: 100%;
background: blueviolet;
padding-bottom: 10px;
}
table.stats tbody tr:nth-child(even) {
vertical-align: middle !important;
}
table.stats tbody tr {
vertical-align: middle !important
}
Even If I try to set it through margin and padding then both of them gets shifted even when the class names are different. One more thing I noticed. When I inspect the element table. When I remove vertical-align: baseline from these two places (as marked in the picture below) the my problem is solved:
What is wrong with my code. Please correct me.
Here vertical-align: baseline property is applied to the table. vertical-align: middle !important is applied for tr element.
since table has that property tr itself aligned in baseline. try adding vertical-align: middle for the table
I'm using a library that generates tables with headers like this
<th>
<span class="xxx">header title</span>
<span class="sort_icon"/>
<input text (optional, depending on column definition for filtering) class="yyy">
</th>
what I would like to do is with pure css make the header title and sort icon align to top of the th element, and input element if present to the bottom of th element.
My problem is that vertical-align can be set only to th element and thus making both spans and input to go top or bottom, but I cannot figure out a way to align differenty spans and input
Usually in this type of situation it's easier to use absolute positioning:
<style type="text/css">
.th
{
position:relative;
}
.xxx
{
position:absolute;
top:0px;
left:0px;
}
.yyy
{
position:absolute;
bottom:0px;
left:0px;
}
</style>
The only drawback is you have to make sure the height of the th is enough to accomodate the sort icon. That's pretty easy - just set a height and any necessary margin/padding on it, or on the th.
Fixid position is an option, but it is going to be hard to keep the input box on the bottom since you don't know how much content will be in the header. It might go on 2 lines and others on 1.
You might try something in like in the example below. The span tags aren't block elements so you cannot move the so easely. Therefor, use display:block and then work with margins and padding.
PS.: better use css file... inline styles are just for example
<table>
<tbody><tr>
<th style="
max-height: 100px;
background-color: red;
vertical-align: top;
">
<span class="xxx" style="
display: block;
">header title</span>
<span class="sort_icon" style="
display: block;
margin-top: 200;
">
<input text="" (optional,="" depending="" on="" column="" definition="" for="" filtering)="" class="yyy">
</span></th>
</tr>
</tbody></table>
I would like to create a page header with a icon. However sometimes the page titles becomes too big and wrap to another line.
for now my result is:
but I would like to get this result (photoshoped)
Important! the icon must be aligned to the first line, like above picture.
Here is my HTML code:
<div class="page-header">
<div class="header-icon"><img src="to_do.png"></div>
<h1 class="page-title" >Não está em aula <small>2016-02-14 14:04</small></h1>
</div>
Here is my CSS
.page-header .header-icon{
display: inline-block;
vertical-align: middle;
padding-right: 10px;
}
.page-header .page-title{
display: inline;
vertical-align: middle;
}
You can define a bigger height for the icon. For this you have to add float:left and a fixed defined height in the .header-icon class.
For example like this:
.page-header {
width: 400px;
}
.page-header .header-icon {
display: block;
vertical-align: middle;
padding-right: 10px;
float: left;
height: 100px;
}
.page-header .page-title {
display: inline;
vertical-align: middle;
}
<div class="page-header">
<div class="header-icon">
<img src="http://placehold.it/30x30">
</div>
<h1 class="page-title">Não está em aula <small>2016-02-14 14:04</small></h1>
</div>
Alternatively you can use padding-bottom for the .header-icon class.
The very simple answer (which some people will disapprove of) is to create a 2 column, 1 row table - the image goes in column one, the text in column two.
This way, any text overflow is catered for within column two - the separation between the image and the text is maintained.
I think this is a perfectly acceptable use of a simple presentational table when you have an image / text combination on one line (which happens often).
Whatever others say, this is the simplest way to do it.
Notice the top colored table on the sidebar that says LIFESTYLE.
The text just won't vertical-align to the middle and that table just won't get any shorter.
It's basically a custom html module in Joomla with Gantry and K2 that I put some PHP into (Using Sourcerer) so it chooses it's table bg color based on an array of colors. Simple right?
There's got to be some margin, padding, something somewhere and I can't find it. Any ideas?
To be absolutely honest I don't know why this is happening but this seems to fix the issue...
Replace the following:
<div class="titlebars">
<font color="#FFFFFF">LIFESTYLE</font>
</div>
with:
<span class="titlebars">
<font color="#FFFFFF">LIFESTYLE</font>
</span>
EDIT
The problem is the <br> tag after the <div>:
<td style="vertical-align: middle; width: 100%; line-height: normal; margin: 0px 0px 0px; padding: 0px; cellpadding=0 cellspacing=0">
<div class="titlebars">
<font color="#FFFFFF">LIFESTYLE</font>
</div>
<br> <----- THIS IS THE PROBLEM
</td>
Remove it and the cell behaves as you want it to.
Just declare your .titlebars div as display:inline-block, add some padding to fill that header a bit and you should be all set:
CSS
.titlebars {
display: inline-block;
font-size: 30px;
font-weight: 800;
margin: 0;
padding: 5px 0;
}
Also, <font> tags? I believe they've been deprecated, so you can use a p tag instead and style that.
I know this question has been asked many times, but I never saw a satisfactory answer. I mean, an answer that actually works.
So, here we go again. Take this jsFiddle: http://jsfiddle.net/KFMyn/3/
If you remove the align="center" from the HTML, what CSS do you need to use to make the result look the same as the original?
The answers I found usually amount to margin:0 auto and/or text-align:center but neither of those have the desired effect of making the result look the same as the original.
The text align center covers most of the text elements but a little extra is needed to centre align the table
div {width:400px; text-align:center;}
table {margin: 0 auto;}
table td {text-align: left;}
http://jsfiddle.net/NYuv8/4/
div {width:400px; text-align: center;}
table {display:inline-block;}
Should work as well in addition to Paul's answer.
http://jsfiddle.net/KFMyn/13/
div {width:400px; margin: 0 auto; text-align: center; }
div > * { margin: 0 auto; }
Works for me. But this may not work properly when you have multiple nested dom elements
margin: 0 auto;
text-align: center;
Above Code might not be working when you are using bootstrap grids.
Here is the quick solution for this using bootstrap 4 and IT WORKS IN EVERY BROWSERS
<div class="row">
<div class="col-sm-2">
<div class="customClass mx-auto">
<p class="text-center"> your text goes here </p>
</div>
</div>
</div
you can put any column like col-sm-2, 3, 4.......12
Replacement for Center tag in different situations
1. text-center
Works with p, a, button, h tags and more i.e all the tags containing data or text directly
2. Flex
It can used to align complete element inside another element, however it has more utilities check documentation for reference
Use can center elements using flex in following manners
display:flex;
justify-content:center;
align-items:center;
Another import property is flex-direction i.e
flex-direction:column
flex-direction:row
Use flex direction according to the type of alignment you want
3. mx-auto (bootstrap class)
You can try and style the table as well, like this:
div {
width:400px;
margin: 0 auto;
text-align: center;
}
div table {
margin: 0 auto;
}
Why not just leave it
<div align="center">
It still works just fine with all browsers as far as I know. I have plenty of old html and I got to this thread only because my NetBeans IDE is warning me this is obsolete. My guess is the browsers are automatically translating to the correct solution. Same thing with
<font size="6">bla bla</font>
still works just fine and probably automatically converted to
<span style="font-size:36px">bla bla</span>
div { width: 400px; text-align: center; }
table { display: inline-block; }
This should work. Check example here: http://jsfiddle.net/ye7ngd3q/2/
and if you want elements inside table cell left/right aligned then you can define individual classes and assign to element respectively as show below:
HTML
<div align="center">
A centered div
<p>A</p>
<table border="1">
<tr><td class="align-left">centered</td><tr>
<tr><td class="align-right">div</td><tr>
</table>
<ul><li>A centered div</li></ul>
</div>
CSS
div { width: 400px; text-align: center; }
table { display: inline-block; }
.align-left { text-align: left; }
.align-right { text-align: right; }