html - 需要具有 CSS 对齐属性的解决方案

Question

如何水平对齐单选按钮和复选框图标？我试过 flexbox 的 justify 内容中心，但元素仍然乱七八糟。请帮忙。

    	body {
    		color: #faebd7;
    		background-image: linear-gradient(45deg, #7b4397, #dc2430);
    		text-align: center;
    		padding: 5%;
    	}

    	main {
    		background: linear-gradient(35deg, #cc2b5e, #753a88);
    		border-radius: 10px;
    		padding: auto;
    		margin-left: 15%;
    		margin-right: 15%;
    		box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    	}

    	h1 {
    		padding: 1.1em;
    		margin: auto;
    		font-family: Roboto, monospace;
    	}

    	p {
    		font-family: B612, monospace;
    		margin: 10px;
    	}

        .form-container {
    		display: flex;
    		flex-flow: column;
    		justify-content: center;
    		align-items: center;
        }

    	.form-group {
    		font-family: B612, monospace;
    		margin-left: 15%;
    		margin-right: 15%;
    		margin-top: 5px;
    		margin-bottom: 5px;
    		padding: 5px;
    	}

    	.text-white {
    		color: #fff;
    		font-size: 20px;
    		font-family: Roboto, monospace;
    	}

    	#dropdown {
    		font-family: B612, monospace;
    	}

    	#number-label {
    		font-family: B612, monospace;	
    	}

        .btn.btn-primary {
        	margin-bottom: 20px;
        }

<main class="container">

  	<h1 id="title">How's the stream?</h1>

  	<p id="description">
  		Have you watched Jordon Baade stream over on <a style="color: #fff;" href="https://www.twitch.tv/bpwnd" target="_blank"><strong>Twitch</strong></a>? If you have, I'd like to know what you think so far, and get your opinion on a few other things!
  	</p>

  	<form action="#" id="survey-form">

  		<div class="form-group">
  			<label for="name" id="name-label">Name:</label>
  			<input type="text" class="form-control" id="name" placeholder="Enter your full name" required>
  		    <br><br>
  			<label for="email" id="email-label">Email:</label>
  			<input type="email" class="form-control" id="email" placeholder="Enter your email" required>	
            <br><br>
  			<label for="number" id="number-label">Age:</label>
  			<input type="number" class="form-control" min="13" max="85" id="number" placeholder="Enter your age" required>
    	</div>
        <br>
        <label for="dropdown" id="dropdown">Are you enjoying the stream?</label>
        	<select id="dropdown" name="dropdown" class="form-control">
        		<option disabled value="">Select an option</option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
        	</select>
        <br><br>
        <div class="form-group">
        	<fieldset>
        		<legend>What's your favourite topic that he stream?</legend>
                <div class="form-container">
                <div class="form-check">
            		<input id="programming" class="form-check-input" type="radio" name="stream_topic" value="programming">
            		<label for="programming" class="form-check-label">Programming</label>
   	            </div>

                <div class="form-check">
            		<input id="gaming" class="form-check-input" type="radio" name="stream_topic" value="gaming">          	
                	<label for="gaming" class="form-check-label">Gaming</label>
	            </div>

                <div class="form-check">
            		<input id="harmonica_practice" class="form-check-input" type="radio" name="stream_topic" value="harmonica_practice">
                	<label for="harmonica_practice" class="form-check-label">Harmonica Practice</label>
                </div>

                <div class="form-check">
            		<input id="guitar_practice" class="form-check-input" type="radio" name="stream_topic" value="guitar_practice">
            		<label for="guitar_practice" class="form-check-label">Guitar Practice</label>
            	</div>
                </div>
        	</fieldset>
        </div>	

        <div class="form-group">
        	<fieldset>
        		<legend>What services do you use to watch live streams?</legend>
        		<div class="form-container">
                <div class="form-check">
            		<input id="twitch" class="form-check-input" type="checkbox" name="stream_service" value="twitch">
            		<label for="twitch" class="form-check-label">Twitch</label>
                </div>

                <div class="form-check">
            		<input id="youtube_gaming" type="checkbox" name="stream_service" value="youtube_gaming">
            		<label for="youtube_gaming">YouTube Gaming</label>
                </div>

                <div class="form-check">
            		<input id="ustream" type="checkbox" name="stream_service" value="ustream">
            		<label for="ustream">UStream</label>
                </div>

                <div class="form-check">
            		<input id="playstation_now" type="checkbox" name="stream_service" value="playstation_now">
            		<label for="playstation_now">Playstation Now</label>
            	</div>
            	</div>
        	</fieldset>
        </div>	
        
        <div class="form-group">
     		<label for="comments">Additional comments:</label><br>
        		<textarea class="form-control" name="comments" id="comments" placeholder="Enter your comments" cols="30" rows="10"></textarea>
        </div>

            <br>

        	<button type="submit" class="btn.btn-primary" id="submit" rows="3">Submit answers</button>
        </div>

  	</form>

    </main>

    <footer class="text-right" container>
    	<a href="https://www.jordanbaade.com" target="_blank" class="text-white">Made by Seyienei with help from Jordan Baade.</a>
    </footer>

Answer 1

您可以将 align-items: flex-start; 与 .form-container 一起使用

body {
    		color: #faebd7;
    		background-image: linear-gradient(45deg, #7b4397, #dc2430);
    		text-align: center;
    		padding: 5%;
    	}

    	main {
    		background: linear-gradient(35deg, #cc2b5e, #753a88);
    		border-radius: 10px;
    		padding: auto;
    		margin-left: 15%;
    		margin-right: 15%;
    		box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    	}

    	h1 {
    		padding: 1.1em;
    		margin: auto;
    		font-family: Roboto, monospace;
    	}

    	p {
    		font-family: B612, monospace;
    		margin: 10px;
    	}

        .form-container {
    		display: flex;
    		flex-flow: column;
    		justify-content: center;
    		align-items: flex-start; // Changed this
        }

    	.form-group {
    		font-family: B612, monospace;
    		margin-left: 15%;
    		margin-right: 15%;
    		margin-top: 5px;
    		margin-bottom: 5px;
    		padding: 5px;
        text-align: left; // Change this
    	}

    	.text-white {
    		color: #fff;
    		font-size: 20px;
    		font-family: Roboto, monospace;
    	}

    	#dropdown {
    		font-family: B612, monospace;
    	}

    	#number-label {
    		font-family: B612, monospace;	
    	}

        .btn.btn-primary {
        	margin-bottom: 20px;
        }

<main class="container">

  	<h1 id="title">How's the stream?</h1>

  	<p id="description">
  		Have you watched Jordon Baade stream over on <a style="color: #fff;" href="https://www.twitch.tv/bpwnd" target="_blank"><strong>Twitch</strong></a>? If you have, I'd like to know what you think so far, and get your opinion on a few other things!
  	</p>

  	<form action="#" id="survey-form">

  		<div class="form-group">
  			<label for="name" id="name-label">Name:</label>
  			<input type="text" class="form-control" id="name" placeholder="Enter your full name" required>
  		    <br><br>
  			<label for="email" id="email-label">Email:</label>
  			<input type="email" class="form-control" id="email" placeholder="Enter your email" required>	
            <br><br>
  			<label for="number" id="number-label">Age:</label>
  			<input type="number" class="form-control" min="13" max="85" id="number" placeholder="Enter your age" required>
    	</div>
        <br>
        <label for="dropdown" id="dropdown">Are you enjoying the stream?</label>
        	<select id="dropdown" name="dropdown" class="form-control">
        		<option disabled value="">Select an option</option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
        	</select>
        <br><br>
        <div class="form-group">
        	<fieldset>
        		<legend>What's your favourite topic that he stream?</legend>
                <div class="form-container">
                <div class="form-check">
            		<input id="programming" class="form-check-input" type="radio" name="stream_topic" value="programming">
            		<label for="programming" class="form-check-label">Programming</label>
   	            </div>

                <div class="form-check">
            		<input id="gaming" class="form-check-input" type="radio" name="stream_topic" value="gaming">          	
                	<label for="gaming" class="form-check-label">Gaming</label>
	            </div>

                <div class="form-check">
            		<input id="harmonica_practice" class="form-check-input" type="radio" name="stream_topic" value="harmonica_practice">
                	<label for="harmonica_practice" class="form-check-label">Harmonica Practice</label>
                </div>

                <div class="form-check">
            		<input id="guitar_practice" class="form-check-input" type="radio" name="stream_topic" value="guitar_practice">
            		<label for="guitar_practice" class="form-check-label">Guitar Practice</label>
            	</div>
                </div>
        	</fieldset>
        </div>	

        <div class="form-group">
        	<fieldset>
        		<legend>What services do you use to watch live streams?</legend>
        		<div class="form-container">
                <div class="form-check">
            		<input id="twitch" class="form-check-input" type="checkbox" name="stream_service" value="twitch">
            		<label for="twitch" class="form-check-label">Twitch</label>
                </div>

                <div class="form-check">
            		<input id="youtube_gaming" type="checkbox" name="stream_service" value="youtube_gaming">
            		<label for="youtube_gaming">YouTube Gaming</label>
                </div>

                <div class="form-check">
            		<input id="ustream" type="checkbox" name="stream_service" value="ustream">
            		<label for="ustream">UStream</label>
                </div>

                <div class="form-check">
            		<input id="playstation_now" type="checkbox" name="stream_service" value="playstation_now">
            		<label for="playstation_now">Playstation Now</label>
            	</div>
            	</div>
        	</fieldset>
        </div>	
        
        <div class="form-group">
     		<label for="comments">Additional comments:</label><br>
        		<textarea class="form-control" name="comments" id="comments" placeholder="Enter your comments" cols="30" rows="10"></textarea>
        </div>

            <br>

        	<button type="submit" class="btn.btn-primary" id="submit" rows="3">Submit answers</button>
        </div>

  	</form>

    </main>

    <footer class="text-right" container>
    	<a href="https://www.jordanbaade.com" target="_blank" class="text-white">Made by Seyienei with help from Jordan Baade.</a>
    </footer>