I need to horizontally align text inside a specific table cell, but the HTML code is from a third-party source. I am only able to modify the style of the span element.
.Change {
text-align: center;
}<table>
<tr>
<td>Some random text</td>
<td>Some random text</td>
</tr>
<tr>
<td><span class="Change">Center me</span></td>
<td>Some random text</td>
</tr>
</table>According to MDN, a span is typically an inline-element. If you want the span to fill the width of its parent element, you can set it as display: inline-block. Then use text-align: center to align the content.
.Change {
width: 100%;
text-align: center;
display: inline-block;
}<table>
<tr>
<td>Some random text</td>
<td>Some random text</td>
</tr>
<tr>
<td><span class="Change">Center me</span></td>
<td>Some random text</td>
</tr>
</table>Using "width: 100%;" and "margin: 0 auto;" did not produce the desired result
It seems that the table cell (td) has some default styles like indent 0, which is preventing the intended styling.
By floating to the right and setting a width of 100%, we were able to override the predefined styles and achieve the desired text alignment.
.Change {
text-align: center;
width: 100%;
float: right;
}<table>
<tr>
<td>Some random text</td>
<td>Some random text</td>
</tr>
<tr>
<td><span class="Change">Center me</span></td>
<td>Some random text</td>
</tr>
</table>By default, a <span> element is inline-block. However, if you are only able to modify the CSS within that element, you can change its display property to block in order for it to take up the width of the cell:
.Change {
display: block;
text-align: center;
}<table>
<tr>
<td>Some random text</td>
<td>Some random text</td>
</tr>
<tr>
<td><span class="Change">Center me</span></td>
<td>Some random text</td>
</tr>
</table>I'm attempting to write a function that can achieve the functionality shown in this example without repeating code. I want to create tabs that display content based on which tab is clicked, similar to this: https://www.w3schools.com/howto/howto_js_tab ...
I am trying to create a table with vertical scrolling for the entire table content. Additionally, I need two columns within the table to be scrollable horizontally, but the horizontal scrollbars disappear when the vertical scrollbar is present. How can I k ...
Is it possible to automatically load all CSS (or JS) files from a specific folder in Liferay 6.2? Below is an example of the liferay-portlet.xml file: <portlet> <portlet-name>Example</portlet-name> <icon>/icon.png</icon ...
When I have a bootstrap-select inside a td of a table-responsive table, I encounter an issue. If I click on the select-picker, the dropdown menu is not completely visible as the visibility is limited by the table margin. To address this, I tried adding d ...
My webpage has two columns, each containing an SVG and some text. However, when I resize the window in Google Chrome, the text drops below the SVG before the window width goes below 600px. How can I prevent this from happening while maintaining a constant ...
<div style="overflow-x: hidden"> <div style="height: 100%"> <p style="margin-bottom: 1rem"> lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan nisl id maximus gravida. </p> ...
Can Material-UI be customized using traditional CSS instead of the makeStyles feature? I'm intrigued to learn more about the styling options in Material-UI. I'm aiming to replicate the red style at the bottom using basic CSS techniques. https:/ ...
I am looking to incorporate ellipsis into li.text, while still maintaining the presence of the right span (which contains numbers) and the spacing (padding) between the number span and the text span. Is there a way to achieve this? .right { float: ri ...
Upon reviewing the code below, I noticed that when all the SELECT elements are removed from the HTML, the alignment of the DIV containing SELECT 4 is corrected and stacked properly without any skipped columns. This raises the question - Could there be defa ...
I'm attempting to position two divs next to each other. The first item should have an image on the left and text on the right. The second item should have text on the left and an image on the right. And for the third item, there should be an image on ...
I understand that absolute positioning disrupts the normal flow of elements, but I expected the display order to reflect the order in which elements are placed in the HTML code. .absolute { position: absolute; width: 100px; height: 100px; ...
I am facing an issue with a 5-star rating system (radio buttons) that is intended to be used in two separate questions. The problem arises when the ratings for each question seem to be linked, causing a selection made in one question to affect the other. ...
Can anyone help me figure out how to adjust my CSS so that when my device screen is small, a specific section of the background image is displayed instead of just the center? Here is how my background image is currently set: background-image: url(*.jpg); ...
I am currently working on a website project. The genre navigation menu is located in the bottom left container, and I had to use a negative margin property to position the li elements correctly. However, there seems to be an unexpected top padding of aro ...
Could someone assist me in selecting a date from the small window using CSSSelector or any other method? Below is an example of HTML code for reference. <td class=" " onclick="DP_jQuery_1468593787056.datepicker._selectDay('#dp1468593787059',1 ...
I currently have two nested divs like this: <div id="header"> <div id="logo"></div> <div id="header_r"></div> </div> The corresponding CSS styles are as follows: #header{ border: ...
I'm facing a unique challenge and could use some guidance. The issue is with the mobile version of my website, accessible at . On tablets or mobile devices, the menu is condensed into a button. To navigate through the menu, I have to click the button ...
I'm struggling to remove the border that is encircling my image thumbnail label. I attempted to create a new class "noborder" and added it under my .col-md-4.noborder css rule, setting the border to 0 none and box-shadow to 0 none but unfortunately it ...
Struggling to center align the text on my webpage, I've encountered an issue where the text starts drifting to the right inside its container after each menu item selection. Frustrated, I resorted to sprinkling text-align: center; everywhere in my cod ...
Currently, I am delving into MaterialUI and my focus is on creating a range slider. I came across this example that I found useful: https://material-ui.com/components/slider/#range-sliders My goal is to assign different colors to the "high," "medium," and ...