CODEWITHSUNDEEP
htmlcss
Dave Smith
Dave Smith

Reputation: 195

css `text-align` on input elements in `<fieldset>`

I produced the following code in HTML and CSS

		* {
			font-family: Arial, Verdana, sans-serif;
			color: #665544;
		}
		input {
			border-bottom: 1px dotted #dcdcdc;
			border-top: none;
			border-right: none;
			border-left: none;
			padding: 5px;
			width: 280px;
			margin-bottom: 20px;
		}
		input:focus {
			border: 1px dotted #dcdcdc;
			outline: none;
		}
		input#submit {
			color: #ffffff;
			background-color: #665544;
			border: none;
			border-radius: 5px;
			width: 80px;
		}
		input#submit:hover {
			color:#665544;
			background-color: #efefef;
		}
		fieldset {
			width: 350px;
			border: 1px solid #dcdcdc;
			border-radius: 10px;
			padding: 10px 20px;
			text-align: right;
		}
		legend {
			background-color: #efefef;
			border: 1px solid #dcdcdc;
			border-radius: 10px;
			padding: 10px 20px;
			text-align: left;
			text-transform: uppercase;
		}
<!DOCTYPE html>
<html>
<head>
	<title>Styling Fieldsets and Legends</title>
</head>
<body>
	<form>
		<fieldset>
			<legend>Newsletter</legend>
			<label for="name">Name: </label><input type="text" id="name" />
			<label for="email">Email: </label><input type="text" id="email" />
			<input type="submit" value="Subscribe" id="submit" />
		</fieldset>
	</form>
</body>
</html>

Now what I'm confused about is the text-align property.

I thought the text-align property only applies to text within a given element.

When I set text-align:right; in fieldset I expect all the text in the form to move to the right in the page.

So why does the input element then also move to the right even though the property involves text?

Upvotes: 0

Views: 924

Answers (3)

McHat
McHat

Reputation: 860

The text-align property will affect all all textual content of a block-level element, as well as display: inline and display: inline-block elements. Your <input> element is an inline element by default, and so it is affected by the parent fieldset's text-align property.

See this article: https://css-tricks.com/almanac/properties/t/text-align/

It may also be helpful to note that elements defaulted to display: inline are defaulted this way because the CSS designers expected them to be intermingled in line with the text. Therefore, it would not make sense if they were not also aligned like the text.

Upvotes: 1

Matthew Billie
Matthew Billie

Reputation: 21

input elements are inline elements, so they are affected by the text-align CSS property.

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

If you are only trying to align the label elements, you could specify fieldset label { } in your CSS.

Upvotes: 1

Dekel
Dekel

Reputation: 62596

Not exactly.

The text-align property describes how inline content is aligned in its parent block element.

Text is an example of inline content, but this also apply to other inline elements as well.

Upvotes: 1

Related Questions