Question

我正在开展免费代码营的番茄钟项目：

https://www.freecodecamp.com/challenges/build-a-pomodoro-clock

而我正试图将输入框放在中心但我没有取得多大成功。有没有人有任何想法？

    var timeMin = 0;
    var timeSec = 3;
    var timerIntervalID = null;

    function pad (str, max) {
      str = str.toString();
      return str.length < max ? pad("0" + str, max) : str;
    }


    function updateTimer() {
    	var displayString = "";

    	console.log("Update timer()");
    	if (timeSec === 0) {
    		timeSec = 59;
    		timeMin--;
    	} else {
    		timeSec--;
    	}

    	displayString = timeMin + ":" + pad(timeSec, 2);


    	$(".timer").html(displayString);

    	if (timeMin < 1 && timeSec < 1) {
    		$(".timer").css('color', 'red');
    		clearInterval(timerIntervalID);
    		alert("Pomodoro Over!")
    	}
    }

    function test() {
    	console.log("Test");
    }

    $(document).ready(function() {
    	$("button").click(function() {
    		var whichButton = $(this).attr("value");
    		console.log("Button pressed");
    		switch(whichButton) {
    			case "start":
    				timerIntervalID = setInterval(updateTimer, 1000);
    				break;
    			case "reset":
    				timeMin = 0;
    				timeSec = 3;
    				if (timerIntervalID !== null) {
    					clearInterval(timerIntervalID);
    				}

    				$(".timer").css('color', 'black');
    				displayString = timeMin + ":" + pad(timeSec, 2);
    				$(".timer").html(displayString);
    				break;
    		}
    	});
    });

    .btn-primary {
    	width: 15rem;
    	margin: 0.2rem;
    	height: 5rem;
    }

    .btn-danger {
    	width: 15rem;
    	margin: 0.2rem;
    	height: 5rem;
    }

    input {
            max-width: 4rem;
            text-align:center;
            display:block;
            margin:0;
     }

    <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="styles.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <script src="main.js"></script>
    </head>

    <html>
    	<head>
    	    <meta charset="utf-8">
    	    <title>fccPomodoro</title>
    	</head>
      <div class="container">
        <div class="jumbotron text-center">
            <h1>fccPomodoro</h1>
              <h2 class="timer">Time Left: 25 minutes</h2>
              <button type="button" class="btn btn-primary" value="start">Start Pomodoro</button>
              <button type="button" class="btn btn-danger" value="reset">Reset</button>
              <div class="form-group">
                <label for="min">Minutes:</label>
                <input type="text" class="form-control" id="min" value="25">
              </div>
              <div class="form-group">
                <label for="sec">Seconds:</label>
                <input type="text" class="form-control" id="sec" value="00">
              </div>
        </div>
      </div>
    </html>

styles.css

.btn-primary {
    width: 15rem;
    margin: 0.2rem;
    height: 5rem;
}

.btn-danger {
    width: 15rem;
    margin: 0.2rem;
    height: 5rem;
}

input {
        max-width: 4rem;
        text-align:center;
        display:block;
        margin:0;
}

Answer 1

你可以

margin: 0 auto

在输入框上：

input {
    max-width: 4rem;
    text-align:center;
    display:block;
    margin:0 auto;
}

Answer 2

请参阅下面的CSS;

＆＃13;

    var timeMin = 0;
    var timeSec = 3;
    var timerIntervalID = null;

    function pad (str, max) {
      str = str.toString();
      return str.length < max ? pad("0" + str, max) : str;
    }


    function updateTimer() {
    	var displayString = "";

    	console.log("Update timer()");
    	if (timeSec === 0) {
    		timeSec = 59;
    		timeMin--;
    	} else {
    		timeSec--;
    	}

    	displayString = timeMin + ":" + pad(timeSec, 2);


    	$(".timer").html(displayString);

    	if (timeMin < 1 && timeSec < 1) {
    		$(".timer").css('color', 'red');
    		clearInterval(timerIntervalID);
    		alert("Pomodoro Over!")
    	}
    }

    function test() {
    	console.log("Test");
    }

    $(document).ready(function() {
    	$("button").click(function() {
    		var whichButton = $(this).attr("value");
    		console.log("Button pressed");
    		switch(whichButton) {
    			case "start":
    				timerIntervalID = setInterval(updateTimer, 1000);
    				break;
    			case "reset":
    				timeMin = 0;
    				timeSec = 3;
    				if (timerIntervalID !== null) {
    					clearInterval(timerIntervalID);
    				}

    				$(".timer").css('color', 'black');
    				displayString = timeMin + ":" + pad(timeSec, 2);
    				$(".timer").html(displayString);
    				break;
    		}
    	});
    });

＆＃13;

    .btn-primary {
    	width: 15rem;
    	margin: 0.2rem;
    	height: 5rem;
    }

    .btn-danger {
    	width: 15rem;
    	margin: 0.2rem;
    	height: 5rem;
    }

    .form-group {
            text-align:center;
     } 

    .form-group input {
            max-width: 4rem;
            display:block;
            margin:0 auto 0 auto;
     }

＆＃13;

    <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="styles.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <script src="main.js"></script>
    </head>

    <html>
    	<head>
    	    <meta charset="utf-8">
    	    <title>fccPomodoro</title>
    	</head>
      <div class="container">
        <div class="jumbotron text-center">
            <h1>fccPomodoro</h1>
              <h2 class="timer">Time Left: 25 minutes</h2>
              <button type="button" class="btn btn-primary" value="start">Start Pomodoro</button>
              <button type="button" class="btn btn-danger" value="reset">Reset</button>
              <div class="form-group">
                <label for="min">Minutes:</label>
                <input type="text" class="form-control" id="min" value="25">
              </div>
              <div class="form-group">
                <label for="sec">Seconds:</label>
                <input type="text" class="form-control" id="sec" value="00">
              </div>
        </div>
      </div>
    </html>

＆＃13;

Answer 3

您是否尝试在中心标记内编码输入标记？

<center><input type="text" ></center>

如何在HTML / CSS / Bootstrap中居中输入字段

3 个答案: