I have a module which is a table actually.
The table.component.html source code as follow:
<table border=1>
<theader></theader>
</table>
And the theader.component.html source code as follow:
<thead #theader>
<tr><td class="alignCenter underlineText">Table Header</td></tr>
</thead>
Furthermore, the content of style.css as follows:
.alignCenter
{
text-align: center;
}
.underlineText
{
text-decoration: underline;
}
table
{
border-spacing: 0;
border-collapse: collapse;
width:1660px;
}
I don't know why the text "Table Header" does not align center.
However, the underline decoration works.
Even the computed CSS show the text already aligned.
I attached a screen dump for your reference.
This is my app in stackblitz.
You are applying text-align: center on <thead>. This ensures that the content inside <thead> is aligned center.
But <thead> element is in <table> and is not aligned center. You have apply text-align: center on the <thead>'s parent element which is <table>.
Make following change to your CSS and it should work. But remember that this will also align center other children of <table>.
table
{
// Other properties.
text-align: center;
}
Live demo on StackBlitz: https://stackblitz.com/edit/angular-7ce5qe
You need reset your theader component styles.
#Component({
...
selector: 'theader',
styles: [`
:host {
width: 100%;
display: inherit;
}
`],
})
https://stackblitz.com/edit/angular-xo5vhq?file=src%2Fapp%2Ftable%2Ftheader%2Ftheader.component.ts
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 BlueGriffon and reading the following links:
Center-align a HTML table
Center a table
CSS: Centered tables
about how to center a table using CSS, as align has been deprecated. However, none of them are working, the code suggested in the 3 links to center a table looks like this:
.centered-table {
margin-left: auto;
margin-right: auto%;
}
My code:
CSS:
.maintbl {
margin-left: auto;
margin-right: auto%;
}
HTML:
<table class="maintbl" id="tblMain">
<tbody>
<tr>
<td>Hello world<br>
</td>
</tr>
</tbody>
</table>
Instead of centering, it appears on the right side. I copied the code from the last link directly into the editor, and the result was the same. What wrong and how do I fix it?
I think its better practice for table center. just use css on the table tag
example.
table {
width: 60%;
margin: 0 auto;
}
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;
}
Fiddle: http://jsfiddle.net/oh78n5r5/17/
I am attempting to render a parenthesized expression using a table with one row and three cells: left, middle and right, where left and right are parentheses and middle is the expression. I would like both the parentheses and the expression text to be properly vertically aligned with an adjoining span representing a function name. So the final result should look like: f(x).
My current approach is to set vertical-align: middle on the table. This aligns the parentheses fairly well, but unfortunately, in chrome the expression text is below the function name.
Is there any css that will allow me to use the HTML I am currently using and will work cross-browser? (The HTML is good because it will allow parentheses to grow with large expressions like fractions).
The html I am using is the following:
<span>f</span>
<table class="paren">
<tr>
<td class="left"></td>
<td class="mid"><span class="x">x</span></td>
<td class="right"></td>
</tr>
</table>
my current css is (paren images are stubbed out):
.left, .right { background-color: gray; }
.paren { display: inline-table; border-collapse: collapse; border-spacing: 0; }
.paren .left, .paren .right { padding: 0px; width: .35em; }
.mid{ }
body { font-size: 24px }
Please check this: jsFiddle. This is the new CSS which I added:
.f {
vertical-align: middle;
}
.mid {
text-align: center;
}
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; }