Centered text in <td> with CSS aligned to the right

Question

Centered text in <td> with CSS aligned to the right

https://i.sstatic.net/UrB5f.jpg

Is there a way to align the 3 input fields so that their right edges are all vertical? I still want the text+Input to be centered within the column but aligned vertically...

Using Bootstrap 3.3.7

HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive col-lg-12 ">
<table class="table table-bordered text-center">
    <thead>
    </thead>
    <tbody>
        <tr>
            <th class="text-center" scope="row">Net. Config</th>
            <td>
                <form class="form-inline">
                    IP Address:
                    <input type="text" class="form-control txbIPsubmit" id="SYST_IPAD" placeholder="0.0.0.0">
                </form>
                <form class="form-inline">
                    NetMask :
                    <input type="text" class="form-control txbIPsubmit" id="SYST_NETM" placeholder="0.0.0.0">
                </form>
                <form class="form-inline">
                    Gateway :
                    <input type="text" class="form-control txbIPsubmit" id="SYST_GWAD" placeholder="0.0.0.0">
                </form>
                <div class="form-control-static">
                    <input type="checkbox" class="form-check-input" id="SYST_DHCP">
                    <label class="form-check-label" for="SYST_DHCP">DHCP</label>
                </div>

                <form class="form-inline">
                    <button type="button" class="btn btn-light" id="btnNetConfig">Apply</button>
                </form>
            </td>
        </tr>
        <tr>
    </tbody>
</table>
</div>

css twitter-bootstrap

Answer 1

Answer №1

It's important to note that there are several improvements that can be made to optimize the code provided.

First and foremost: Instead of using individual form tags for each field, it is best practice to wrap the entire table in a single form tag.

Secondly: Tables should be avoided for non-tabular content. Consider using alternative methods like flexbox for layout purposes, as tables are primarily meant for displaying tabular data.

Thirdly: The proper usage of th tags is within the thead tags. Th tags should serve as headers for each column in the table.

If you decide to continue using tables, a better approach would be to have a td for the field label and a separate td for the input in each row. You can utilize colspan and rowspan attributes to make cells span across multiple columns or rows. Here is an updated example:

<table>
    <tr>
        <td rowspan="3">Network Configuration</td>
        <td style="text-align:right;">IP Address</td>
        <td><input type="text" id="SYST_IPAD" placeholder="0.0.0.0"></td>
    </tr>
    <tr>
        <td style="text-align:right;">Netmask</td>
        <td><input type="text" id="SYST_NETM" placeholder="0.0.0.0"></td>
    </tr>
    <tr>
        <td style="text-align:right;">Gateway</td>
        <td><input type="text" id="SYST_GWAD" placeholder="0.0.0.0"></td>
    </tr>
</table>

Answer 2

It's important to note that there are several improvements that can be made to optimize the code provided.

First and foremost: Instead of using individual form tags for each field, it is best practice to wrap the entire table in a single form tag.

Secondly: Tables should be avoided for non-tabular content. Consider using alternative methods like flexbox for layout purposes, as tables are primarily meant for displaying tabular data.

Thirdly: The proper usage of th tags is within the thead tags. Th tags should serve as headers for each column in the table.

If you decide to continue using tables, a better approach would be to have a td for the field label and a separate td for the input in each row. You can utilize colspan and rowspan attributes to make cells span across multiple columns or rows. Here is an updated example:

<table>
    <tr>
        <td rowspan="3">Network Configuration</td>
        <td style="text-align:right;">IP Address</td>
        <td><input type="text" id="SYST_IPAD" placeholder="0.0.0.0"></td>
    </tr>
    <tr>
        <td style="text-align:right;">Netmask</td>
        <td><input type="text" id="SYST_NETM" placeholder="0.0.0.0"></td>
    </tr>
    <tr>
        <td style="text-align:right;">Gateway</td>
        <td><input type="text" id="SYST_GWAD" placeholder="0.0.0.0"></td>
    </tr>
</table>

Answer 3

Answer №2

If you're looking to address alignment issues and improve usability/accessibility at the same time, consider implementing a flexbox display for your form elements. Adding <label>s to your text and setting them with flex-grow: 1 can help ensure they take up maximum horizontal space. This approach also creates a second child element within each parent flex container for enhanced manipulation.

form {
  display: flex;
}

label {
  flex-grow: 1;
  text-align: right;
  padding-right: 10px;
}

<form>
  <label for="t1">String</label><input type="text" id="t1">
</form>

<form>
  <label for="t2">Long string</label><input type="text" id="t2">
</form>

<form>
  <label for="t3">The longest string</label><input type="text" id="t3">
</form>

http://jsfiddle.net/cyhgk9j2/1/

Answer 4

If you're looking to address alignment issues and improve usability/accessibility at the same time, consider implementing a flexbox display for your form elements. Adding <label>s to your text and setting them with flex-grow: 1 can help ensure they take up maximum horizontal space. This approach also creates a second child element within each parent flex container for enhanced manipulation.

form {
  display: flex;
}

label {
  flex-grow: 1;
  text-align: right;
  padding-right: 10px;
}

<form>
  <label for="t1">String</label><input type="text" id="t1">
</form>

<form>
  <label for="t2">Long string</label><input type="text" id="t2">
</form>

<form>
  <label for="t3">The longest string</label><input type="text" id="t3">
</form>

http://jsfiddle.net/cyhgk9j2/1/

Answer 5

Answer №3

If you're utilizing bootstrap, you have the option to utilize col-md-4 and col-md-8 for vertical alignment of elements. To center text and input, you can apply text-align: center;

To see an example, check out this fiddle

Answer 6

If you're utilizing bootstrap, you have the option to utilize col-md-4 and col-md-8 for vertical alignment of elements. To center text and input, you can apply text-align: center;

To see an example, check out this fiddle

Centered text in <td> with CSS aligned to the right

Answer №1

Answer №2

Answer №3

Similar questions

Row within a table displaying link-like behavior

When the browser is resized, the fadeIn() function restarts from the

The CSS on my website is causing issues with the recaptcha functionality

The particles.js with absolute positioning is currently overlapping my div with relative positioning

Navigating through a Collection of Pictures using Mouse Movement and Left-click Button

Slider with FadeIn effect remains unresponsive to the FadeOut command (JQuery / Javascript)

Animate a div to sense whether it has reached the top or bottom position

-moz-box-reflect - Styling for FireFox

Combine two FontAwesome icons in a stacked manner

Stylish dropdown menu design inspired by W3CSS website

Steps for modifying an element in an array using Javascript

The text is placed over a beautiful SVG image, adding a decorative touch to

Working with CSS styles for the <datalist> element

What is the best way to make a multi-column image responsive in amp-html code?

How can I incorporate classes from multiple CSS files into my WordPress theme?

Retrieving information from AngularJS modal window

Creating HTML code for a mobile responsive design

If viewed on a mobile device, separate the array (indexed list) into two rows

Changing the hover color of an Angular Material MD Button

After clicking the 'add row' button, I successfully added a new row; however, the jQuery date