I want a small image on the top of the page, the logo to be precise. I have set up the bootstrap columns so that the two columns the image will span is center, but the image itself won't center within the two columns it spans. The Dreamweaver live view confirms this.
code:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 col-sm-offset-5">
<img src="Img/Logo.png" id="logo2">
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-color:#DEE7E7;
}
#logo2 {
position:absolute;
width:30%
}
The #logo2 id is mostly just my attempt at centering it, and removing it does not fix the problem. I have looked at the bootstrap documentation and can't figure it out.
You can either apply a text-align: center; to the image's container using Bootstrap's text-center class. E.g:
<div class="col-sm-2 col-sm-offset-5 text-center">
<img src="Img/Logo.png" id="logo2">
</div>
Read more here: http://getbootstrap.com/css/#type-alignment
Or you can style logo2 to display as a block with auto margins. E.g:
#logo2{
display: block;
margin: 0 auto;
max-width: 100%;
}
#logo2 {
display: table;
margin: 0 auto;
}
Related
Context:
I am trying to create 3 charts on 1 row (each has a minimum width) such that on window resize, the charts should also resize and may go to next row depending on the browser total width.
Problem:
Currently, I am missing something in the css because the chart is overflowing within the demo container below. The tooltip looks fine, but only half of the chart is seen in the container and both the axes are also hidden.
Has someone implemented something similar before? I want to understand how to load the charts in the div.
P.S. In the code below, highcharts-container is the inbuilt div which contains the charts. I am using the latest version of Highcharts and Angular 7.
My current html code -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md4 demo>
<div class="demo-container">
<highcharts-chart [Highcharts]="Highcharts" [options]="options1" [callbackFunction]="cb1">
</highcharts-chart>
</div>
</div>
<div class="col-lg-4 col-md4 demo>
<div class="demo-container">
<highcharts-chart [Highcharts]="Highcharts" [options]="options2" [callbackFunction]="cb2">
</highcharts-chart>
</div>
</div>
<div class="col-lg-4 col-md4 demo>
<div class="demo-container">
<highcharts-chart [Highcharts]="Highcharts" [options]="options3" [callbackFunction]="cb3">
</highcharts-chart>
</div>
</div>
</div>
</div>
My css code (The main part) -->
.container-fluid{
width:100%
}
.demo{
margin: 20px 0;
min-width: 448px;
}
.demo-container{
position: relative;
border: 1px solid transparent;
box-shadow: 0 0 20px #1793f5;
width: 100%;
height: 100%;
}
.highcharts-container{
height: 100% !important;
width: 100% !important;
display: inline-block;
vertical-align: middle;
}
You could try to include the following CSS as a part of demo-container or container-fluid... one of it should do the deal for you.
height: 100% !important;
width: 100% !important;
Update
one of the harder challenges i have encountered, but add this to the style.css
and you have your contents dynamic inside its container.
.highcharts-background, .highcharts-root, .highcharts-container {
max-height: 100%;
max-width: 100%;
}
is this what you are looking for?
This was made using images of the graphs in the links you posted. I also used flexboxes which seems to be what you are looking for.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container-fluid div {
width: auto;
border: 2px solid red;
min-width: 33%;
}
.container-fluid{
display: flex;
flex-wrap: wrap;
border: 2px solid blue;
justify-content: center;
}
<div class="container-fluid">
<div class="chartOne">
<img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
</div>
<div class="chartOne">
<img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
</div>
<div class="chartOne">
<img src="https://i.gyazo.com/161954d0841b7a398d5f0d63e1b2bcc4.png" alt="">
</div>
</div>
<header class="row">
<div class="logo-box col-sm-6 col-xs-12">
<img class="header-logo img-responsive" src="https://s3-us-west-1.amazonaws.com/udacity-content/rebrand/svg/logo.min.svg" alt="udacity logo" />
</div>
<div class="nametag col-sm-6 col-xs-12">
<h1>SIYU WU</h1>
<p class="personal-title">
FRONT-END WEB DEVELOPER
</p>
</div>
</header>
The related style are shown below:
header {
display: flex;
}
.logo-box {
padding-top: 40px;
height: 120px;
}
.header-logo {
width: 300px;
height: 53px;
}
.nametag {
padding-top: 20px;
height: 120px;
}
I'm using bootstrap's framework but it seems not working. The two div each take 50% width no matter the screen size. But if I remove the second div the 1st one will take 100% width at xs size screen.
The bootstrap columns system depends on the display of the .row being block.
By changing it to flex, you've broken it. The children of flex elements have different rules for wrapping.
This question already has answers here:
How can I vertically center text in a dynamically height div?
(10 answers)
Closed 7 years ago.
I want to centre some text within a DIV vertically. However, I'm using Bootstrap and none of the conventional methods seem to work because it's within a column. Here's what I've got so far:
HTML:
<div class="col-sm-6">
<div class="innercontent">
<h2 class="text-center">Last Hope: The Halo Machinima</h2>
</div>
</div>
CSS:
.innercontent {
display:block
margin:auto 0;
}
The col-sm-6 doesn't have a set height and nor does the inner because they will vary on multiple uses. The CSS is what I assumed would work but doesn't.
The effect I kinda want you can see on the live dev site here: http://dev.infiniteideamedia.com/machinima/lasthope.php but it's not perfectly centred using a less than adequate method.
This is how you center anything inside div which has dynamic height
.col-sm-6 {
border: 1px solid;
min-height: 300px;
position: relative;
max-width: 600px;
}
h2 {
margin: 0;
position: absolute;
top: 50%;
transform: translate(0%,-50%);
width: 100%;
text-align: center;
}
<div class="col-sm-6">
<div class="innercontent">
<h2 class="text-center">Last Hope: The Halo Machinima</h2>
</div>
</div>
David Walsh has written a good article on centering. Have a look at it.
Run below snippet
.innercontent {
height:400px;
background:#777;
padding-top:20%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-6">
<div class="innercontent">
<h2 class="text-center">Last Hope: The Halo Machinima</h2>
</div>
</div>
I'm new to Bootstrap, and trying to redesign a website made originally by someone else. It's a WordPress site using the Roots theme, so it has Bootstrap installed. I would like to use an image as a header/banner. I would like the image to be the same size and positioning as the body, at all widths. My code so far is not working. The banner image is not resizing, and it's not aligned with the body at any browser width. Here's what I have now: (the site is http://brilliantzenaudio.com)
In templates/header.php,
<header class="banner" role="banner">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img src="<?php get_template_directory(); ?>/assets/img/brav-banner-2.jpg">
</div>
</div>
</div>
</header>
Some excerpts from app.css that I think are relevant. Let me know if there seems to be something missing here (I can't post all of app.css, it's hundreds of lines),
.content {
background:#fff;
padding-top:2em;
}
.home .content {
padding-top:0;
}
.main { }
.page-header {
margin: 10px 0 20px 0;
background: #222;
padding: 5px;
border-radius: 5px;
}
.page-header h1 {
color:#fff;
margin:0;
}
.page-header h1:before {
content: "\00bb";
}
Instead of having an image tag inside your div.
You could set the background-image of the div. Try something like this.
CSS
#test {
background-image: url("/assets/img/brav-banner-2.jpg");
height: 295px;
background-size: 100%;
}
HTML
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="test">
</div>
Update
Try setting your image to 100% width instead. It should automatically re size the image
My URL http://www.ilandeistudio.com/store/
Below the main slider I have some images and categories..How can I center the div "Nelson" and lock it into place so they stay put while zooming/out?
I tried using padding-left and margin-left but they increase the space in between the categories as well. I just want to slide that entire group into the center...
Thanks!
Put those items in a container div and give that div a width and margin: 0 auto;
HTML:
<div class="nelsonContainer">
<div class=nelson>
<a href="http://www.ilandeistudio.com/store/index.php?route=product/category&path=49">
<img src="http://www.ilandeistudio.com/store/image/cache/data/illandei-120x120.png" />
OUTDOOR
</a>
</div>
<div class=nelson>
<a href="http://www.ilandeistudio.com/store/index.php?route=product/category&path=52">
<img src="http://www.ilandeistudio.com/store/image/cache/no_image-120x120.jpg" />
LIVING
</a>
</div>
/* etc. */
</div>
CSS:
.nelsonContainer {
width: 960px;
margin: 0 auto;
}
Wrap them all in a bigger div, say let's call it nelson-wrapper, and then add automatic left and right margins to it.
HTML:
<div id="nelson-wrapper">
<div class="nelson">...</div>
<div class="nelson">...</div>
<div class="nelson">...</div>
<div class="nelson">...</div>
<div class="nelson">...</div>
</div>
CSS:
#nelson-wrapper{
margin: 0 auto; /* Shorthand for 0 top/bottom, auto left/right margins */
}
EDIT:
Actually, since your divs are blocks, not inline, the above will NOT work, although the following (which I found at: http://www.impressivewebs.com/center-multiple-divs/) will work:
HTML:
<div id="nelson-wrapper">
<div class="nelson">
<div class="nelson">
<div class="nelson">
<div class="nelson">
<div class="nelson">
<div class="nelson">
</div>
CSS:
#nelson-wrapper {
text-align: center;
}
.nelson {
display: inline-block;
}
Note: This will not work correctly in Internet Explorer 8-. To get them to behave, unfortunately, the only workaround is either an Internet-Explorer-only hack, or class. The hack works as such:
CSS:
.nelson {
*display: inline;
*margin: 0 20px 0 20px;
}