how to text align center element inside legend

Question

how to make the element inside the legend text align center?

here is my code..

<fieldset>
    <legend>Event details</legend>

        <table>
        <tr>
            <td>Event title </td>
            <td><input type ="text" name ="eventTitle" value="<?=$title?>"readonly/></td>
        </tr>

        <tr>
            <td>Description</td>
            <td><textarea style="resize:none" name="desc" rows="10" cols="40"><?=$desc?></textarea></td>
        </tr>

        <tr>
            <td>Venue Name</td>
            <td><input type = "text" name="venueName" value="<?=$venue?>"readonly/></td>
        </tr>

        <tr>
            <td>Location</td>
            <td><input type="text" name="location" value="<?=$location?>"readonly/></td>
        </tr>

        <tr>
            <td>Event Start Date</td>
            <td><input type="text" name="eventStartDate" value="<?=$eStart?>"readonly/></td>
        </tr>

        <tr>
            <td>Event End Date</td>
            <td><input type="text" name="eventEndDate" value="<?=$eEnd?>"readonly/></td>
        </tr>

        <tr>
            <td>Event Price</td>
            <td><input type="text" name="eventPrice" value="<?=$ePrice?>"readonly/></td>
        </tr>
        </table>

        <button type="button">Update</button>

</fieldset>

i tried put margin auto in fieldset but still the same
and also i tried to put the textalign center in the table tag.

Do you want to align the form to center or the legend text? – MohammadReza Mahmoudi Oct 31 '16 at 13:52 — MohammadReza Mahmoudi, Oct 31 '16 at 13:52
the form to text aligh center – Chi Shen Oct 31 '16 at 13:52 — Chi Shen, Oct 31 '16 at 13:52
please try this. Event details – Pengzhi Zhou Oct 31 '16 at 13:54 — Pengzhi Zhou, Oct 31 '16 at 13:54

James Donnelly · Answer 1 · 2016-10-31T13:55:02.113

You should be able to achieve this by giving your fieldset element a text-align of center and setting your table element within to display: inline-table:

fieldset {
  text-align: center;
}

table {
  display: inline-table;
}

<fieldset>
    <legend>Event details</legend>

        <table>
        <tr>
            <td>Event title </td>
            <td><input type ="text" name ="eventTitle" value="<?=$title?>"readonly/></td>
        </tr>

        <tr>
            <td>Description</td>
            <td><textarea style="resize:none" name="desc" rows="10" cols="40"><?=$desc?></textarea></td>
        </tr>

        <tr>
            <td>Venue Name</td>
            <td><input type = "text" name="venueName" value="<?=$venue?>"readonly/></td>
        </tr>

        <tr>
            <td>Location</td>
            <td><input type="text" name="location" value="<?=$location?>"readonly/></td>
        </tr>

        <tr>
            <td>Event Start Date</td>
            <td><input type="text" name="eventStartDate" value="<?=$eStart?>"readonly/></td>
        </tr>

        <tr>
            <td>Event End Date</td>
            <td><input type="text" name="eventEndDate" value="<?=$eEnd?>"readonly/></td>
        </tr>

        <tr>
            <td>Event Price</td>
            <td><input type="text" name="eventPrice" value="<?=$ePrice?>"readonly/></td>
        </tr>
        </table>

        <button type="button">Update</button>

</fieldset>

I wouldn't advise using a <table> here at all though really. Table elements are used to represent tabular data, not form fields.

What he should do is stop using tables for forms... – junkfoodjunkie Oct 31 '16 at 13:55 — junkfoodjunkie, Oct 31 '16 at 13:55
@junkfoodjunkie definitely. – James Donnelly Oct 31 '16 at 13:55 — James Donnelly, Oct 31 '16 at 13:55

score 0 · Answer 2 · answered Oct 31 '16 at 13:53

Try this:-

<form>
<fieldset>
<legend>Person:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>

Your CSS should look something like this:

legend {
    margin:0 auto;
}

or

<legend align="center">Legend</legend>

score 0 · Answer 3 · answered Oct 31 '16 at 13:55

Why are you using a table for form?!

Add a fix width to your table and margin: 0 auto;

table{
    width: 378px;
    margin: 0 auto;
}

Working example: https://jsfiddle.net/oog3kdwk/

Or

fieldset{
  text-align: center;
}

table{
  display: inline-block;
  text-align: left;
}

Working example: https://jsfiddle.net/oog3kdwk/1/

score 0 · Answer 4 · answered Oct 31 '16 at 13:59

0

  <legend align="center" >Event details</legend>

answered Oct 31 '16 at 13:59

jobair ahmed

141
1
9

score 0 · Answer 5 · answered Oct 31 '16 at 14:01

If I understand your doubt, I advise you to make some changes in your HTML. The table tag should not be indented relative to legend tag, but as her brother. Look here.

What I did in this example, you were only centralize the label, but if you need to center the inputs, it is quite simple to add in CSS

table tr td:first-child {
    text-align: center;
}

<fieldset>
  <legend>Event details</legend>

  <table>
    <tr>
      <td>Event title</td>
      <td>
        <input type="text" name="eventTitle" value="" readonly/>
      </td>
    </tr>

    <tr>
      <td>Description</td>
      <td>
        <textarea style="resize:none" name="desc" rows="10" cols="40"></textarea>
      </td>
    </tr>

    <tr>
      <td>Venue Name</td>
      <td>
        <input type="text" name="venueName" value="" readonly/>
      </td>
    </tr>

    <tr>
      <td>Location</td>
      <td>
        <input type="text" name="location" value="" readonly/>
      </td>
    </tr>

    <tr>
      <td>Event Start Date</td>
      <td>
        <input type="text" name="eventStartDate" value="" readonly/>
      </td>
    </tr>

    <tr>
      <td>Event End Date</td>
      <td>
        <input type="text" name="eventEndDate" value="" readonly/>
      </td>
    </tr>

    <tr>
      <td>Event Price</td>
      <td>
        <input type="text" name="eventPrice" value="" readonly/>
      </td>
    </tr>
  </table>

  <button type="button">Update</button>
</fieldset>

I hope to have helped in some way

score 0 · Answer 6 · answered Oct 31 '16 at 14:34

Change CSS code for fieldset and legend to:

fieldset {
      display: block;
      margin: 20px 1%;
      margin-bottom: 20px;
      padding: 0 auto;
      padding: 15px 0;
      border: 0;
      border-top: 1px solid #DDD;
      width: 98%;
}

fieldset:last-of-type {
      margin-bottom: 0px;
}

legend {
     display: table; 
     min-width: 0px;
     max-width: 70%;
     position: relative;
     margin: auto;
     padding: 5px 20px;
     color: #eee8aa;
     font-size: 20px;
     text-align: center;
}

then change

Event Details ...

how to text align center element inside legend

6 Answers6