I am appending h4 elements to a div with the class of teamDisplay. I want the appended elements to be centered on the page but aligned to the left. For example, I want the alignment to look like this (aligned left)
4. New York Giants
5. Green Bay Packers
6. Buffalo Bills
however, the appended elements are currently aligning to the center like so
4. New York Giants
5. Green Bay Packers
6. Buffalo Bills
I have tested removing my appendInline class which then aligned everything to the left, however, all the appended elements appeared on separate lines rather than on one single line. In this question, the responders say that display: inline and text-align wouldn’t have any affect together. I thought that I would be able to get past that by wrapping my appended inline elements in a div with display: inline-block and text-align: left, but to no avail.
html
<body>
<div id="newFavTeamDiv" class="teamDisplay"></div>
</body>
css
body {
text-align: center;
}
.teamDisplay {
display: inline-block;
text-align: left;
}
.appendInline {
display: inline;
}
javascript
// create elements
var teamNumber = document.createElement("h4");
var teamCityName = document.createElement("h4");
var teamMascotName = document.createElement("h4");
...
// assign elements "display: inline" property so they they all appear on the same line when they are appended together. This is where I run into the issue: I want the h4 elements to append on one line (that is why I use inline) and align to the left within the center inline-block div that they are being appended to, but instead they are currently aligning center
teamNumber.className = "appendInline";
teamCityName.className = "appendInline";
teamMascotName.className = "appendInline";
document.getElementById("newFavTeamDiv").append(teamNumber, teamCityName, " ", teamMascotName);