All geek questions in one place

Uncentered text in Bootstrap column

I built a 1-10-1-column header construct in Bootstrap. Now I want to focus this one ! in the 10th column. But, as you can see, the dotted lines in the middle of the page ! Do not center in the exact middle. Why not? And how can I get it there?

And the height of the title depends on the font-sizetext in it. How to adjust header height manually using command?

HTML:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JFP</title>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
        <link rel="stylesheet" href="/static/main.css" >
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/static/app.js"></script>
</head>

<body>

<div id="body-wrapper">
<div class="menu">
        <div class="icon-close">
            <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
        </div>

        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
</div>

<div class="container-fluid">
    <div class="header">
        <div class="row">
            <div class="col-md-1 text-center">
                <div class="icon-menu">
                    <i class="fa fa-bars"></i>
                </div>
            </div>
            <div class="col-md-10 text-center">
                <li><a>!</a></li>
            </div>
            <div class="col-md-1 text-center">
            </div>
            </ul>
        </div>
    </div>
</div>


<div class="jumbo"></div>

<div class="footer">
    <div class="container">
        <p>&copy; Lorem ipsum.</p>
    </div>
</div>
</div>

</body>

</html>

CSS

html {}

body{
    left: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

body:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0px;
    bottom: 0px;
    left: 50%;
    border-left: 1px dotted #333333;
}

.menu {
    left: -185px;
    height: 200%;
    position: fixed;
    width: 185px;
}

.menu ul {
    border-top: 1px solid rgb(51,51,51);
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    border-bottom: 1px solid rgb(51,51,51);
    font-family: 'Open Sans', sans-serif;
    line-height: 45px;
    padding-bottom: 3px;
    padding-left: 20px;
    padding-top: 3px;
}

.menu a {
    color: rgb(51,51,51);
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
}

.icon-close {
    cursor: pointer;
    padding-left: 10px;
    padding-top: 10px;
}

.header {
}

.header i {
    font-size: 30px;
    margin-top: 15px;
}

.header a{
    color: rgb(250,250,250);
    font-size: 40px;
    text-align: center;
}

.header .col-md-10 {
    background-color: rgb(51,51,51);
    width: 85%;
    margin-left:auto;
    margin-right:auto;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

.footer {
    background-color: rgb(51,51,51);
    color: rgb(51,51,51);
    padding: 30px 0;
    margin-top: 1000px;
}

.footer p {
    color: rgb(250,250,250);
    font-family: 'Raleway', sans-serif;
    text-transform: normal;
    font-size: 11px;
}

@media (max-width: 500px) {
    .main h1 {
        font-size: 50px;
        padding: 0 40px;
    }
    .supporting .col {
        width: 100%;
    }
}

JS:

$(document).ready(function() {
    $(".icon-menu").click(function() {
    $(".menu").animate({
    left: "0px"
    }, 600);
    $(".icon-menu").toggle(1600);

    $("body").animate({
    left: "185px"
    }, 600);
    });
});

$(document).ready(function() {
$('.icon-close').click(function() {
    $('.menu').animate({
    left: "-185px"
    }, 600);
    $(".icon-menu").toggle(600);

    $('body').animate({
    left: "0px"
    }, 600);
    });
});

Codepen

+4
source share
3 answers

Try the following:

<div class="row col-md-12">
...
     <div class="col-md-10 text-center">
          <li><a>!</a></li>
     </div>
...
</div>

If you want to change the height of the title, try setting the height for the div, for example:

<div class="col-md-10 text-center" style="height:100px;">
     <li><a>!</a></li>
</div>

, css div.

+1

! . ? ?

<li> . <span> ( ), ! .

<div class="col-md-10 text-center">
  <a>!</a>
</div>

?

height. background-color, , header .

.header {
  height: 200px;
  background-color: blue;
}
0

actallay ! already enters the center of your dashed line, giving the body after the center is not aligned, you need to use the translated instead of the left. for the title to create height you need to give the title in the navbar div, which is the bootstrap class.

here is a demo ...

$(document).ready(function() {
    $(".icon-menu").click(function() {
    $(".menu").animate({
    left: "0px"
    }, 600);
    $(".icon-menu").toggle(1600);
                          
    $("body").animate({
    left: "185px"
    }, 600);
    });
});

$(document).ready(function() {
$('.icon-close').click(function() {
    $('.menu').animate({
    left: "-185px"
    }, 600);
    $(".icon-menu").toggle(600);
                       
    $('body').animate({
    left: "0px"
    }, 600);
    });
});
html {}

body{
    left: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

body:after {
     border-left: 1px dotted #333333;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    margin: 0 auto 0 50%;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
     z-index: -1;
    -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
 }

.menu {
    left: -185px;
    height: 200%;
    position: fixed;
    width: 185px;
}

.menu ul {
    border-top: 1px solid rgb(51,51,51);
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    border-bottom: 1px solid rgb(51,51,51);
    font-family: 'Open Sans', sans-serif;
    line-height: 45px;
    padding-bottom: 3px;
    padding-left: 20px;
    padding-top: 3px;
}

.menu a {
    color: rgb(51,51,51);
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
}

.icon-close {
    cursor: pointer;
    padding-left: 10px;
    padding-top: 10px;
}

.header {
}

.header i {
    font-size: 30px;
    margin-top: 15px;
}

.header a{
    color: rgb(250,250,250);
    font-size: 40px;
    text-align: center;
}

.header .col-md-10 {
    background-color: rgb(51,51,51);
    width: 85%;
    margin-left:auto;
    margin-right:auto;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

.footer {
    background-color: rgb(51,51,51);
    color: rgb(51,51,51);
    padding: 30px 0;
    margin-top: 1000px;
}

.footer p {
    color: rgb(250,250,250);
    font-family: 'Raleway', sans-serif;
    text-transform: normal;
    font-size: 11px;
}

@media (max-width: 500px) {
    .main h1 {
        font-size: 50px;
        padding: 0 40px;
    }
    .supporting .col {
        width: 100%;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JFP</title>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
        <link rel="stylesheet" href="/static/main.css" >
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/static/app.js"></script>
</head>

<body>

<div id="body-wrapper">
  

<div class="navbar"> 

<div class="menu">
        <div class="icon-close">
            <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
        </div>
                
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
  </div>

<div class="container-fluid">
    <div class="header ">
        <div class="row">
            <div class="col-md-1 text-center">
                <div class="icon-menu">
                    <i class="fa fa-bars"></i>
                </div>
            </div>
            <div class="col-md-10 text-center">
                <li><a>!</a></li>
            </div>
            <div class="col-md-1 text-center">
            </div>
            </ul>
        </div>
    </div>
</div></div>


<div class="jumbo"></div>

<div class="footer">
    <div class="container">
        <p>&copy; Lorem ipsum.</p>
    </div>
</div>
</div>

</body>

</html>
Run codeHide result
0
source

Source: https://habr.com/ru/post/1606944/

More articles:


All Articles