我无法按下按钮,将它们居中时选择框(文本对齐:居中;)

时间:2019-03-20 17:21:31

标签: html css

我有一个div类,其中包含按钮,选择框和输入文本(在我所有的jsp文件中均作为div共享),在其中设置了css样式(text-align:center);

此div左对齐时,我可以按一下并输入所有的

这是我包含的http://scratchpad.io/first-protest-1771

的jsp文件

如果我不包括整个代码,则无论我如何将文本对齐,我的div都会起作用。

有人可以告诉我,怎么了?

1 个答案:

答案 0 :(得分:0)

您可以使用此代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="javascript/lib/jquery-1.11.0.js"></script>
    <title>eBanking</title>
    <link rel="stylesheet" href="style.css">
        <style type="text/css">
        @media print {
            .example-screen {
                display: none;
            }
            .example-print {
                display: block;
            }
        }
        .extraCont {
            color: white;
        }
        td {
            /*   text-align: center; */
        }
        footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: red;
            color: white;
            text-align: center;
        }
        body {
            margin: 0;
            padding: 0;
            background: url(bg.jpg) no-repeat;
            background-size: cover;
            font-family: Arial;
        }
        .loginBox {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 350px;
            height: 420px;
            padding: 80px 40px;
            box-sizing: border-box;
            background: rgba(0, 0, 0, .5);
        }
        h2 {
            margin: 0;
            padding: 0 0 20px;
            color: #efed40;
            text-align: center;
        }
        h3 {
            color: #efed40;
        }
        h1 {
            color: #efed40;
            text-align: center;
        }
        .loginBox p {
            margin: 0;
            padding: 0;
            font-weight: bold;
            color: #fff;
        }
        .loginBox input {
            width: 100%;
            margin-bottom: 20px;
        }
        .loginBox input[type="text"],
        .loginBox input[type="password"] {
            border: none;
            border-bottom: 1px solid #fff;
            background: transparent;
            outline: none;
            height: 40px;
            color: #fff;
            font-size: 16px;
        }
        ::placeholder {
            color: rgba(255, 255, 255, .5);
        }
        .loginBox input[type="submit"] {
            border: none;
            outline: none;
            height: 40px;
            color: #fff;
            font-size: 16px;
            background: #ff267e;
            cursor: pointer;
            border-radius: 20px;
        }
        .loginBox input[type="submit"]:hover {
            background: #efed40;
            color: #262626;
        }
        .loginBox a {
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            text-decoration: none;
        }
        .menuBox ul {
            margin: 0 auto;
            padding: 0px;
            list-style: none;
            text-align: center;
        }
        .menuBox ul li {
            float: left;
            width: 210px;
            height: 40px;
            background-color: black;
            color: white;
            opacity: .8;
            line-height: 40px;
            text-align: center;
            font-size: 20px;
            margin-right: 25px;
        }
        .menuBox ul li a {
            text-decoration: none;
            color: white;
            display: block;
            padding: 0px 15px;
        }
        .menuBox ul li a:hover {
            background-color: green;
        }
        .menuBox .menuboxli {
            text-align: center;
            margin: 0 auto;
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
                ul li ul li {
            display: none;
        }
        ul li:hover ul li {
            display: block;
        }
        .sanBox {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 600px;
            height: 500px;
            padding: 80px 40px;
            box-sizing: border-box;
            background: rgba(0, 0, 0, .5);
        }
        .menuBox {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 870px;
            height: 500px;
            padding: 80px 40px;
            /*  box-sizing: border-box; */
            /*  background: rgba(0,0,0,.5)  ; */
        }
        .mapBox {
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1280px;
            height: 600px;
            padding: 80px 40px;
            box-sizing: border-box;
            background: rgba(0, 0, 0, .5);
        }
        .user {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            position: absolute;
            top: calc(-100px/2);
            left: calc(50% - 50px);
        }
        .menuRight ul {
            list-style-type: none;
            margin: 0;
            padding: 10px;
            overflow: hidden;
        }
        .menuRight li {
            float: right;
        }
        .menuRight li a {
            display: inline-block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        .vizCont {
            margin-top: 120px;
            text-align: center;
        }
        .white {
            color: white;
        }
        #renunta {}
        #renunta a {
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            text-decoration: none;
        }    
    </style>
</head>
<body>
    <div class="menuRight">
        <ul>
            <li><a href="logout.jsp">Logout</a></li>
        </ul>
    </div>
    <div class="menuBox">
        <h1>eBanking</h1>
        <ul>
            <li class="menuboxli"><a>CONTURIffgfdfg</a>
                <ul>
                    <li><a href="administrareCont.jsp">AdministrareCont</a></li>
                    <li><a href="vizualizareCont.jsp">VizualizareCont</a></li>
                </ul>
            </li>
            <li class="menuboxli"><a>OPERATII</a>
                <ul>
                    <li><a href="transfer.jsp">Transfer</a></li>
                    <li><a href="alimentareCont.jsp">OperatiiInCurs</a></li>
                </ul>
            </li>
            <li class="menuboxli"><a>RAPOARTE</a>
                <ul>
                    <li><a href="extraCont.jsp">ExtraCONT</a></li>
                </ul>
            </li>
            <li class="menuboxli"><a href="aprobare.jsp">APROBARE</a></li>
        </ul>
    </div>
    <footer> Tomuta Dan Claudiu dannyetlv @2019 </footer>
</body>
</html>