Estoy agregando elementos h4 a un div con la clase de teamDisplay . Quiero que los elementos adjuntos estén centrados en la página pero alineados a la izquierda. Por ejemplo, quiero que la alineación se vea así (alineada a la izquierda)
4. New York Giants 5. Green Bay Packers 6. Buffalo Billssin embargo, los elementos adjuntos actualmente se están alineando al centro así
4. New York Giants 5. Green Bay Packers 6. Buffalo Bills Probé eliminando mi clase appendInline que luego alineó todo a la izquierda, sin embargo, todos los elementos agregados aparecieron en líneas separadas en lugar de en una sola línea. En esta pregunta, los que respondieron dicen que display: inline y text-align no tendrían ningún efecto juntos. Pensé que podría superar eso envolviendo mis elementos en línea adjuntos en un div con display: inline-block y text-align: left , pero fue en vano.
// 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); body { text-align: center; } .teamDisplay { display: inline-block; text-align: left; } .appendInline { display: inline; } <body> <div id="newFavTeamDiv" class="teamDisplay"></div> </body>no sé si entiende su pregunta si me equivoco dígame más, ¿quiere alinear en línea tres elementos h4 a la izquierda dentro del elemento div? si quieres esto pruébalo
.teamDisplay { display: flex; justify-content:flex-start;}