Center a Field Set with CSS

Center a field set with CSS

There is no float: center, only left and right. Float simply allows block level elements to line up horizontally by taking them out of their stack flow. It's similar to display:inline-block except it aligns them to the direction of the float.

What you want is to set the margins to auto. If you want to center align the nodes inside the fieldset, you can add text-align:center; to this:

fieldset{
  border: 1px solid rgb(255,232,57);
  width: 400px;
  margin:auto;
}

Center a fieldset in an HTML page

The solution is to position the element absolutely, offsetting the div by 50% from the left and the top part of the window and move the div to the left and to the top with half its width and height with a negative margin, to have it perfectly centered.

and this is the CSS code:

    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;

Fieldset: Center legend

In HTML 5, the legend align attribute has been depreciated so here is how I did it.

Note that Bootstrap 4 (don't know about 3) completely hides a field set border and sets the legend width to 100%. So in addition to adding the width:auto, you would also have to use css to set the fieldset border if you want it to display.

legend {
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

for

<legend>Legend</legend>

how to positioning fieldset tag?

You need to target the input itself rather than the fieldset, as the input has text-align: start by default. What you're looking for is:

fieldset input {
  text-align: center;
}

To align the fieldet itself, it behaves a little differently, as it is a block element, rather than text. To align a block element centrally, you need to give it margin: auto. This can also be used with images (or any other element) by explicitly defining them as a block element with display: block:

fieldset {
  margin: auto;
}

Keep in mind that margin: auto is stating that all four margins should have automatic offsets (centralised). That includes the top and bottom margins. You can align just the left and right margins with shorthand margin: 0 auto.

Updated code:

body {  background-color: #f42b68;  width: 100%;}fieldset {  height: 50%;  width: 80%;  background: #ffffff;  margin: auto;  text-align: center;}fieldset input {  text-align: center;}

<body>  <fieldset>    <form>      <input type="text" placeholder="txt">    </form>  </fieldset></body>

Align elements inside fieldset

As Paulie_D mentioned in the comment, there is no method for this but if suitable for you to define min-height then you can do the trick. Add min-height:100px for your description.

See fiddle: http://jsfiddle.net/txdbsmdh/2/

Align fieldset legend at center

Add this CSS, remove margin :auto & left:40% then add margin-left:40%.

.Fieldset {  border: 1px solid #CCC;  border-radius: 5px;  padding: 10px;}
.Legend {  border: medium none;  margin-left: 40%;  padding: 0 10px;  position: relative;  text-align: center;  width: auto;  color: #3C6EAC;  font-size: 18px;  font-weight: bold;}

<fieldset class="Fieldset">  <legend class="Legend" id="Legend">Add</legend></fieldset>

Center Div/Text in Fieldset Dynamically

I would recommend adjusting your markup to support using :only-child in CSS. This is a pseudo-class that represents an element without any siblings. Definitely give the documentation a review for some other examples.

/* Selects each <p>, but only if it is the only child of its parent. */
p:only-child {
  background-color: lime;
}

It's pretty useful for situations just like this and the implementation wouldn't take very many changes.

var formula = document.createElement("P");formula.innerText = "This element represents your formula being added to the container which removes the styles applied with :only-child.";var active = false;function toggleFormula() { active = !active; document.getElementById("legend").innerText = active ? "Click here to hide formula." :                    "Click here to show formula.";  let tbox = document.getElementById("t-box"); if (active)  tbox.appendChild(formula); else  tbox.removeChild(formula);}

.container { position: relative; }.legend {  position: absolute;  top: -10px;  left: 20px;  z-index: 1;  padding: 0.2em 0.8em;  background: #d65a31;  border-radius: 25px;  width: auto;  min-width: 200px;  font-size: 3vmax 2vmin;  font-family: 'Lato', sans-serif;  cursor: pointer;}#definition {  margin: 0 auto;  margin-top: 5%;  text-align: center;  max-width: 60%;  font-size: 1.5vmax;}#definition:only-child {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}.tBox {  position: relative;  width: auto;  max-width: 100%;  min-height: 400px;  max-height: 500px;  background-color: #222831;  border-radius: 5px;  margin: 40px auto;  align-content: center;  color: #eeeeee;  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;  font-family: 'Lato', sans-serif;}#definition {  margin: 0 auto;  margin-top: 5%;  text-align: center;  max-width: 60%;  font-size: 1.5vmax;}#definition:only-child {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

<div class="container"> <legend id="legend" class="legend" onclick="toggleFormula();">Click here to show formula.</legend> <fieldset id="t-box" class="tBox">  <div id="definition">Answers if we did what we said we would do. BECAUSE IT'S LONG I'LL ADD EXTRA TEXT TO SHOW MULTI-LINE EFFECT</div> </fieldset></div>

Center a Field Set with CSS