Text that must always be centered

I'm having an issue with my match result page layout. The "VS" is not consistently centered and it's causing some weird display problems. How can I ensure that the "VS" is always centered?

http://jsfiddle.net/3adhoker/

.result-in-month:nth-child(even) {
    background-color: #ebebeb;
}

.result-in-month {

    background-color: #f3f3f3;
}


.result-in-month {
padding: 20px 30px;
font-size: 15px;
}

 .gdlr-result-date {
display: inline-block;
width: 20%;
margin-right: 2%;
font-style: italic;
}

 .gdlr-result-match-team-wrapper {
display: inline-block;
width: 56%;
text-align: center;
font-weight: bold;
text-transform: uppercase;
}
.gdlr-result-match-versus {
margin: 0px 2.5%;
padding: 0px 3px;
font-weight: normal;
}

.gdlr-result-match-team.gdlr-left {
margin-right: 2.5%;
text-align: right;
}

.gdlr-result-match-team.gdlr-right {
margin-left: 2.5%;
text-align: left;
}
<div class="result-in-month">
<div class="gdlr-result-date">25 Sun - 14:00</div>
<div class="gdlr-result-match-team-wrapper">
<span class="gdlr-result-match-team gdlr-left">
Bristol City
</span>
<span class="gdlr-result-match-versus">
VS
</span>
<span class="gdlr-result-match-team gdlr-right">
Real Soccer
</span>
</div>
<div class="clear"></div>
</div>
<div class="result-in-month">
<div class="gdlr-result-date">25 Sun - 14:00</div>
<div class="gdlr-result-match-team-wrapper">
<span class="gdlr-result-match-team gdlr-left">
Bristol City
</span>
<span class="gdlr-result-match-versus">
VS
</span>
<span class="gdlr-result-match-team gdlr-right">
Real MASTERCLASS
</span>
</div>
<div class="clear"></div>
</div>

htmlcss

Answer №1

To achieve a fixed width layout, you can utilize the CSS properties display: table and display: table-cell. Make sure to set specific widths as indicated in the CSS comments:

.result-in-month:nth-child(even) {
  background-color: #ebebeb;
}
.result-in-month {
  background-color: #f3f3f3;
  display: table;/*use display table*/
  width: 100%;
}
.result-in-month {
  padding: 20px 30px;
  font-size: 15px;
}
.gdlr-result-date {
  display: table-cell;/*use display table-cell*/
  width: 20%;
  margin-right: 2%;
  font-style: italic;
}
.gdlr-result-match-team-wrapper {
  display: table;/*use display table*/
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
}
.gdlr-result-match-versus {
  display: table-cell;/*use display table-cell*/
  margin: 0px 2.5%;
  padding: 0px 3px;
  font-weight: normal;
}
.gdlr-result-match-team.gdlr-left {
  display: table-cell;/*use display table-cell*/
  margin-right: 2.5%;
  text-align: right;
}
.gdlr-result-match-team.gdlr-right {
  display: table-cell;
  margin-left: 2.5%;
  text-align: left;
  width: 200px;/*set a fixed width (e.g. 200px)*/
}
<div class="result-in-month">
  <div class="gdlr-result-date">25 Sun - 14:00</div>
  <div class="gdlr-result-match-team-wrapper">
    <span class="gdlr-result-match-team gdlr-left">
Bristol City
</span>
    <span class="gdlr-result-match-versus">
VS
</span>
    <span class="gdlr-result-match-team gdlr-right">
Real Soccer
</span>
  </div>
  <div class="clear"></div>
</div>
<div class="result-in-month">
  <div class="gdlr-result-date">25 Sun - 14:00</div>
  <div class="gdlr-result-match-team-wrapper">
    <span class="gdlr-result-match-team gdlr-left">
Bristol City
</span>
    <span class="gdlr-result-match-versus">
VS
</span>
    <span class="gdlr-result-match-team gdlr-right">
Real MASTERCLASS
</span>
  </div>
  <div class="clear"></div>
</div>

Answer №2

Tables are the way to go for tabular data instead of using display: table-cell;. They provide the best solution for presenting structured information.

.result-in-month tr:nth-child(even) {
    background-color: #ebebeb;
}

.result-in-month{
    border-spacing: 0px;
    border-collapse: separate;
    font-size: 15px;
    width: 100%;
    background-color: #f3f3f3;
}

.result-in-month td{
    padding: 20px 30px;
}

.gdlr-result-date {
    font-style: italic;
}
td.gdlr-result-match-versus {
    padding: 0;
    font-weight: normal;
}

.gdlr-result-match-team {
    font-weight: bold;
    text-transform: uppercase;
}

.gdlr-left {
    text-align: right;
}

.gdlr-right {
    text-align: left;
}
<table class="result-in-month">
  <tr>
    <td class="gdlr-result-date">25 Sun - 14:00</td>
    <td class="gdlr-result-match-team gdlr-left"> Bristol City</td>
    <td class="gdlr-result-match-versus">VS</td>
    <td class="gdlr-result-match-team gdlr-right">Real Soccer</td>
  </tr>
  <tr>
    <td class="gdlr-result-date">25 Sun - 14:00</td>
    <td class="gdlr-result-match-team gdlr-left"> Bristol City</td>
    <td class="gdlr-result-match-versus">VS</td>
    <td class="gdlr-result-match-team gdlr-right">Real MASTERCLASS</td>
  </tr>
</table>

JSFiddle

Answer №3

.display-month-results {
    ...
    display: table-row;
}
.display-month-results > div {
    display: table-cell;
    padding: 10px 0;
}
.team-results-wrapper > span {
    display: table-cell;
    padding: 0 10px;
}

Check out the demo here

Answer №4

One approach I used involves the use of position:absolute. You can view the implementation here.

.result-in-month {
position: relative;
background-color: #f3f3f3;
}

.result-in-month {
padding: 20px 30px;
font-size: 15px;
}

.gdlr-result-date {
display: inline-block;
width: 20%;
margin-right: 2%;
font-style: italic;
}

.gdlr-result-match-team-wrapper {
display: inline-block;
width: 56%;
text-align: center;
font-weight: bold;
text-transform: uppercase;

position: absolute;
}

.gdlr-result-match-versus {
font-weight: normal;
position: absolute;
left: 0;
right: 0;
text-align: center;
}

.gdlr-result-match-team.gdlr-left {
text-align: right;
width: 50%;
position: absolute;
left: 0;
padding-right: 30px;
box-sizing: border-box;
}

.gdlr-result-match-team.gdlr-right {
text-align: left;
position: absolute;
padding-left: 30px;
width: 50%;
right: 0;
box-sizing: border-box;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Javascript's .replace() method to preserve HTML elements

This is a JavaScript function I wrote function replaceCharacters(text_input){ return text_input .replace(/O/g, 0) .replace(/I/g, 1) .replace(/o/g, 0) .replace(/i/g, 1) .replace(/t/g, 4) .replace(/d/g, 9) ...

javascripthtml

Having trouble with enabling HTML5 mode to true on an Angular frontend and Laravel backend

I successfully removed the "#!" from my website URL and everything is working perfectly. The only issue I am facing is that when I try to reload a sub URL other than the home page, it shows a "page not found" error. However, I am able to access the same s ...

phpangularjshtmllaravel.htaccess

Access the inner element with Selenium WebDriver in Java

Looking for a way to automate clicking the 'Download' button on a pdf-viewer page using Selenium? Check out this html code snippet from the page: https://i.sstatic.net/5qUtT.png To access the element enclosed within the red frame, you may need t ...

javahtmlselenium-webdriverxpathpdf-viewer

Send information using AJAX within a .NET integrated browser

In our current setup, we utilize a .NET embedded browser to showcase an HTML page that is generated by applying an XSLT file to an XML file using .NET. This process results in HTML content displayed within the embedded browser through the DocumentText prop ...

javascriptjqueryhtml.netajax

css hover function not operational with back to top button

I have implemented a back to top button using the following resource: Although the button is functioning as expected, I am encountering an issue with the hover effect. In Chrome inspector, manually forcing hover on .cd-top does not apply the CSS style as ...

htmlcss

How can I use JavaScript to consistently fetch the CSS-defined percentage setting for padding/margin instead of the pixel size?

How can I retrieve the padding set in CSS for a div with {padding:10% 10px 20% 10px;} using JavaScript, considering that window.getComputedStyle(myelement).getPropertyValue('padding'); returns different results? In Firefox, it shows as "10% 10px ...

javascriptjquerycss

Dual-Language Dublin Core Metadata for Document Description

If I want to express the document title in two languages using Dublin Core, how can I do it? Based on my research, I could do the following: <meta name="dc.language" content="en"> <meta name="dc.language" content="fr"> <meta name="dc.title ...

htmldublin-core

Position a div in the center and add color to one side of the space

I am seeking a way to create a centered div with the left side filled with color, as shown in examples. I have devised two solutions without using flexbox, but both seem somewhat like hacks. body { margin: 0; padding: 0; } .header { width: ...

htmlcss

Ways for enabling the user to choose the layout option

I am looking to develop a customized reporting system where users can select the specific fields they want to include in the report as well as arrange the layout of these fields. The data for the reports is sourced from a CSV file with numerous columns. Us ...

javascriptjqueryhtmlarrays

Positioning a footer at the absolute bottom of a webpage

I am currently working with 2 divs that are absolutely positioned within a relative container. I intend to utilize JavaScript for toggling visibility. .container { position:relative; } .section1 { position:absolute; top:0; left:0; right:0; ...

htmlcss

Tips for avoiding the vertical Stepdown

After searching for ways to prevent step down, I attempted to implement the solutions I discovered in my code. Unfortunately, none of them seemed to work. This could be due to the fact that my stepdown is vertical and involves elements nested inside other ...

htmlcss

Ways to retrieve HTML tags from a website's DOM and shadowDOM

I am currently working on a project using NodeJS where I need to extract the HTML structure of multiple websites. However, I am facing some challenges with this task. My goal is to retrieve only the HTML structure of the document without any content. It is ...

javascripthtmldomshadow-domtreewalker

Adjust the button's width as the text changes to create a dynamic animation

I'm trying to create an animation effect where the width of a button changes whenever the text inside it is updated. I've attempted using useRef on the button itself to grab its clientWidth and then applying that value to a CSS variable in order ...

javascripthtmlcssreactjs

Using TypeScript, apply an event to every element within an array of elements through iteration

I have written the code snippet below, however I am encountering an issue where every element alerts the index of the last iteration. For instance, if there are 24 items in the elements array, each element will alert "Changed row 23" on change. I underst ...

webtypescripthtml

"Exploring the possibilities of customizing Material UI tabs and implementing a tabs scroller

I'm currently trying to customize the appearance of these MUI tabs, specifically the tab color and bottom border color. Despite my attempts using makeStyles and other methods, I haven't been able to achieve the desired result. https://i.sstatic.n ...

javascriptcssreactjsmaterial-uinext.js

Ways to keep the position of an expanded collapsible table from Material UI intact

I found a collapsible table code snippet on this website: https://mui.com/material-ui/react-table/#collapsible-table However, there seems to be an issue where when I expand a row, the table "grows up" as it increases in size. This behavior is not ideal. I ...

javascripthtmlcssreactjsmaterial-ui

Storing various data in separate tables using MySQL and Node.js

Currently, I am working with three tables - user, modules, and an intermediate table called user_module. To perform an inner join between the user and module tables, I need to access the user_module table. "SELECT user.uName, module.moduleName FROM user_m ...

htmlmysqlsqlnode.jsexpress

Establishing a boundary by incorporating a variable into a numerical value

Is there a way to adjust the margin-bottom of an element based on the height of the next() element plus 12px? I attempted the code below but it didn't yield the desired results. $("div.entry-content").css("margin-bottom", $(this).next().outerHeight() ...

jquerycssheight

What is the technical process behind conducting A/B testing at Optimizely?

I'm currently experimenting with Google Analytics and Content Experiments for A/B testing on my website, but I'm encountering some challenges in making it seamless. To utilize the Google API properly, a few steps need to be taken. Firstly, I nee ...

javascripthtmlcssgoogle-analytics-apiab-testing

Having trouble getting the Vue.js framework to function properly on a basic HTML page with a CDN implementation

I recently delved into learning vue.js and decided to focus on forms. However, when I tried to open the file using a live server or XAMPP, it didn't work as expected. It had worked fine before, but now I seem to be encountering some issues. Could anyo ...

javascripthtmlvue.js