Elemente in css linksbündig?

3 Antworten

ingosteinkeseo
27.01.2025, 16:19

Das ist viel Code, den ich nur überflogen habe, aber wenn du ein Flex-Layout verwendest, solltest du auch die Ausrichtung mit Flex-Eigenschaften definieren, beispielsweise

  • justify-content: flex-start;
  • align-items: flex-start;

Dein Browser kann dir dabei helfen: in den Developer Tools ist ein Flex-Werkzeug mit Vorschlägen und Vorschau eingebaut (siehe Screenshot).

Bild zum Beitrag

Wie gesagt habe ich dein konkretes Beispiel nicht eingehend untersucht. Hilfreich bei solchen Fragestellungen ist es eigentlich, vorab dein Problem einzugrenzen und auf ein minimal reproudzierbares Beispiel (minimal reproducible example) zu reduzieren. Dienste wie Codepen (codepen.io) sind super, weil dann andere dein Beispiel kopieren und verändern können.
Woher ich das weiß:Berufserfahrung
- (Webseite, HTML, CSS)
Jathe677
27.01.2025, 16:05

Hier noch mein stylesheet: 

 @import urlhttps://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);

 /* Container holding jsPsych content */

 img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
 }

 .jspsych-display-element {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
 }

 .jspsych-display-element:focus {
   outline: none;
 }

 .jspsych-content-wrapper {
   display: flex;
   margin: auto;
   flex: 1 1 100%;
   width: 100%;
 }

 .jspsych-content { 
/*    max-width: 95%; /* this is mainly an IE 10-11 fix */
  max-width: 95%;
  text-align: center;
  margin: auto; /* this is for overflowing content */
 }

 .jspsych-top {
   align-items: flex-start;
 }

 .jspsych-middle {
   align-items: center;
 }

/* fonts and type */

.jspsych-display-element {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 18px;
  line-height: 1.6em;
  overflow-x: hidden;

}

/* Form elements like input fields and buttons */

.jspsych-display-element input[type="text"] {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 14px;
}

/* borrowing Bootstrap style for btn elements, but combining styles a bit */
.jspsych-btn {
  /*display: inline-block;*/
  padding: 6px 12px;
  margin: 0px;
  font-size: 14px;
  font-weight: 400;
  font-family: 'Open Sans', 'Arial', sans-serif;
  cursor: pointer;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #333;
  background-color: #fff;
  border-color: #ccc;
  width: 50%;
  height: 60%;
}

.jspsych-btn:hover {
  background-color: #ddd;
  border-color: #aaa;
}

.jspsych-btn:disabled {
  background-color: #eee;
  color: #aaa;
  border-color: #ccc;
  cursor: not-allowed;
}

/* jsPsych progress bar */

#jspsych-progressbar-container {
  color: #555;
  border-bottom: 1px solid #dedede;
  background-color: #f9f9f9;
  margin-bottom: 0.5vh; /*das*/
  text-align: center;
  padding: 8px 0px;
  width: 100vw;
  line-height: 1/3*5vh; /*das*/
}
#jspsych-progressbar-container span {
  font-size: 14px;
  padding-right: 14px;
}
#jspsych-progressbar-outer {
  background-color: #eee;
  width: 50%;
  margin: auto;
  height: 2vh;
  display: inline-block;
  vertical-align: middle;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
#jspsych-progressbar-inner {
  background-color: #aaa;
  width: 0%;
  height: 100%;
}

/* Control appearance of jsPsych.data.displayData() */
#jspsych-data-display {
  text-align: left;
}

#jspsych-survey-multi-choice-next{
vertical-align: middle;
text-align: center;
margin-bottom: 1em;
}
.jspsych-survey-multi-choice-question {
 margin-top: 2em;
 margin-bottom: 2em;
}
.jspsych-survey-multi-choice-text span.required {
 color: darkred;
}
.jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-text{
 text-align: center;
}

#jspsych-survey-multi-select-next {
  vertical-align: middle;
  text-align: center;
  margin-bottom: 1em; 
}

.jspsych-survey-multi-select-question {
  margin-top: 0em; 
  margin-bottom: 2em; 
  text-align: left;
}

.jspsych-survey-multi-select-text span.required {
  color: darkred;
}

.jspsych-survey-multi-select-horizontal .jspsych-survey-multi-select-text {
  text-align: center; 
}
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
27.01.2025, 19:21

Die Texte für sich sind linksbündig. Nun ist es nur noch der Wrapper selbst, der zentriert ist.

a) Entferne max-width und margin von .jspsych-content. Wenn du einen Abstand nach links setzen möchtest, kannst du padding (bzw. padding-left) nutzen.

b) Ersetze max-width gegen width.

Des Weiteren hast du in deinem Markup noch einen Fehler. Das style-Element gehört in den head-Bereich, nicht in den body.