I want to center my Logo, but the hyperlink on it extends itself to width 100%, which perfectly makes sense because I set the margin auto.
But how can I still have my Logo centered and have the link only on the area of my image?
.logo {
height: 50px;
display: inline-block;
vertical-align:middle;
padding: 0px 10px;
}
#media (max-width: 600px) {
#nav ul.desktop-nav li {
display: none;
}
.logo {
display: block;
margin: auto;
}
}
<img class="logo" src="logo.png">
If I understand the question correctly, something like this should do the trick:
Have both the logo and the logo-wrapper be inline-block (they will wrap the content, you don't want them display: block). Since they are inline-block elements they can be center aligned via the text-align property of a main wrapper around them. Resize your browser to see your breakpoint take effect.
.wrapper {
text-align: center;
}
.logo-wrapper {
display: inline-block;
}
.logo {
height: 50px;
display: inline-block;
vertical-align: middle;
padding: 0px 10px;
}
#media (min-width: 600px) {
.wrapper {
text-align: left;
}
}
<div class="wrapper">
<a class="logo-wrapper" href="#">
<img class="logo" src="https://i.vimeocdn.com/portrait/58832_300x300">
</a>
</div>
Maybe you put layers which is you want size on the image. Then you attach the link to this layer.
Related
Okay, so, I honestly don't know what I'm doing wrong. So let me just show you:
This is what I'm trying to accomplish (made in PS):
http://puu.sh/ryXC9/7d82671ee0.png
What my results are so far:
http://puu.sh/ryXST/02c9722a53.png (Obviously not successful, and as a side note, the orange box is just a placeholder, I'll fill out the form later).
The problem I'm having is first: Trying to have the width of "social-content" to be just the width and height of the held contents. Of course "main-social" is just the width of screen and height of contents. If I can accomplish the width thing with "social-content" then I'll be able to center the div with "Margin: 0 auto" but alas, I cannot figure out my dilemma. This is my relavent markup( "Follow us" bar is excluded, as its irrelevant):
.fa-facebook {
color: white;
overflow: hidden;
}
.fa-twitter {
color: white;
padding: 0.2em;
}
#main-social {
height: 8em;
}
#social-content {
height: 100%;
width: 70%;
margin: 0 auto;
margin-top: 1.4em;
}
#facebook {
float: left;
display: inline-block;
}
#facebook a {
padding: 0.2em 0.4em 0.2em 0.4em;
background-color: #3b5998;
height: 100%;
text-decoration: none;
}
#facebook a:hover {
color: white;
}
#twitter {
float: left;
display: inline-block;
}
#twitter a {
background-color: #10bbe6;
text-decoration: none;
}
#twitter a:hover {
color: white;
}
#emailForm {
float:left;
display: inline-block;
width: 25em;
margin: 0 auto;
background-color: orange;
height: 7em;
}
<script src="https://use.fontawesome.com/d7993286b8.js"></script>
<div id="main-social">
<div id="social-content">
<div id="facebook">
</div>
<div id="emailForm">
</div>
<div id="twitter">
<a href="twitter.com" class="fa fa-twitter fa-5x" ></a>
</div>
</div>
</div>
Also, the problem also is, It needs to be responsive, the entire site is responsive, and since I'm still new to the responsive scene, I may have not taken the best approaches to it. (Tips not needed, but greatly appreciated :) )
To get #social-content's width to be that of its content, use display: inline-block without a width defined.
If #main-social is simply a container, you can use flexbo to center #social-content within it. Add the following to #main-social:
#main-social {
display: flex;
justify-content: center; // Centers horizontally
align-items: center; // If you need to center vertically, as well
}
I have a logo image with some transparency in it. How can I align the logo image to the center on the fixed navbar and then move it slightly to the left on smaller devices so that the content on the right can fit on the navbar?
I have tried background-size: cover but makes the image responsive and the logo gets cut off. I tried background-size: contain but then I lose the background color of the navbar on larger devices.
Is there a way I can move the image to the html to achieve what I need?
Here is my attempt on plnkr:
https://plnkr.co/edit/Uij12vHwFuaeAS91nYUL?p=preview
thanks
UPDATE:
I am trying a different approach and moved the image into the html and try to use the css flexbox approach. Almost there, but need to remove the gap.
HTML:
<nav class="navbar navbar-fixed-top">
<div class="search">
<i class="fa fa-search"></i>
</div>
<a class="brand-logo" href="#/">
<img src="https://i.imgsafe.org/1963cc1736.png" />
</a>
<aside>
<figure class="account-balance">
<span>de 88,980.7740</span>
<i class="fa fa-user"></i>
</figure>
</aside>
</nav>
CSS
nav.navbar {
border: 0;
color: #FFF;
height: 40px;
min-height: 40px;
z-index: 1;
display: 0;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.search,.filler,aside,figure {
height: 100%;
}
.search,.filler,aside {
background: #266224;
float: left;
}
.search,aside {
flex-grow: 1;
-webkit-flex: 1;
}
.search .fa-search,figure > span {
display: inline-block;
margin-top: 12px;
}
.search {
padding: 0 12px;
}
.brand-logo img {
height: 40px;
max-width: 100%;
}
figure {
float: right;
}
figure.account-balance {
padding-right: 12px;
}
figure > span {
line-height: 25px;
margin-top: 8px;
padding-right: 5px;
}
Here is the modified version using flexbox:
https://embed.plnkr.co/wSWpIDIoJOiSQYVvwHMU/
This does come close to resolving the problem however, this is not working well on iPhone 6 and old iPad.
There is a slight gap on either side of the anchor tag (maybe half a pixel gap), I have tried the solution mentioned here: css flex layout not working on some iPads but it doesn’t work.
Do you know a way to remove the gap?
Try to write specified styles for different device width using this.
try this:
ul li {
height: 180px;
width: 180px;
background: #f6304c;
display: block;
color: #ffffff;
text-align: center;
margin: 2% 0 0 30%;
padding: 50px 0;
}
for mobile device
#media screen and (min-width: 678px) {
ul li {
height: 180px;
width: 180px;
background: #f6304c;
display: block;
color: #ffffff;
text-align: center;
float:left;
/ margin: 2% 0 0 30%;*/
padding: 50px 0;
}
}
use this
.brand-logo {
background: url(https://i.imgsafe.org/1963cc1736.png) left center no-repeat;
background-size: contain;
background-position: center;
background-color: #266224;
height: 100%;
}
the only thing you have to do is fill the O in your logo with the color because it is transparent XD
I am a stuck on trying to change the size and location on social media links on a test web page. No matter what size I change the height and width to in the CSS the image remains super large.
#footer {
height: 40px;
background-color: #69D2E7;
clear:both;
font-family:Open Sans;
}
#footer a {
display: inline-block;
margin-right: 5px;
}
#footer img a {
width: auto;
height: 10px;
max-height: 10px;
}
<div id=“footer”><img src="facebook.png"></div>
<div id=“footer”> <img src="pinterest.png"></div>
<div id=“footer”> <img src="instagram.png"></div>
<div id=“footer”><img src="linkedin.png"></div>
Its a matter of position, the img tag is actually inside a tag, so the one with
#footer img a{}
should be changed into
#footer a img {
width: auto;
height: 10px;
max-height: 10px;
}
Hi I have tested this code and its changing height and width of image. Please try this code: #footer a img { height: 30px; width: 35px; }
#footer a img {
width: auto;
height: 10px;
max-height: 10px;
}
To center the hyperlinks, try this:
#footer {
/* other styles */
text-align: center;
}
If that didn't work, try removing inline-block from a
#footer a {
display: inline-block; /* remove this line, if needed. */
}
I am trying to combine a profile picture with text (title) on my tumblr theme.
I have problems with the alignment. I also need it to be good in responsive view. (If title gets to big, it should fall under - made a picture to illustrate.
css
#header .user-portrait {
border-radius: 100%;
width: 40px;
height: 40px;
margin-right: 18px;
display: inline-block;
vertical-align: middle;
float: left;
}
#header a {
font-weight: bold;
display: block;
margin-bottom: 34px;
vertical-align: top;
}
#description {
color: {color:Description};
padding-right: {text:Minus width for header in px}px;
}
#page-masthead ul {
margin: 0;
list-style-type: none;
display: block;
clear: both;
line-height: 1.92em;
padding-right: {text:Minus width for header in px}px;
}
html:
<div id="page-masthead">
<div id="header">
<img src="{PortraitURL-40}" alt="" class="user-portrait">
{block:IfShowblogtitle}
{Title}
{/block:IfShowblogtitle}
</div>
The best way is when the width is small enough use a media query as follows;
#media only screen and (max-width: ??px) {
#header .user-portrait {
float: none;
margin: 0 auto /* To center the "span" or whatever you're using */
}
}
I need to center html content inside a div class="partners" (top div with 2 images). As you can see from the image below (it floats left instead of center of the div):
This is my html code:
<div id="partners">
<div class="wrap clearfix">
<h2>Partnertnerzy serwisu:</h2>
<ul>
<li><img width="56" height="16" alt="Parnter bar wika" src="/as/partners/wika.png"></li>
<li></li>
</ul>
<a class="linkClose" href="/firmy?clbp=1">Zamknij </a>
</div>
</div>
Image:
CSS:
#partners, #top {
position: relative;
z-index: 100;
}
#partners {
margin: 12px 0 3px;
text-align: center;
}
.clearfix:after, .row:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#partners .wrap {
width: 655px;
}
.wrap {
margin: 0 auto;
position: relative;
width: 990px;
}
#partners h2 {
color: #A6A5A5;
float: left;
font-weight: normal;
margin: 2px 15px 0 0;
}
#partners ul {
float: left;
}
ul {
list-style-position: outside;
list-style-type: none;
}
To center a div, set it's width to some value and add margin: auto.
#partners .wrap {
width: 655px;
margin: auto;
}
EDIT, you want to center the div contents, not the div itself. You need to change display property of h2, ul and li to inline, and remove the float: left.
#partners li, ul, h2 {
display: inline;
float: none;
}
Then, they will be layed out like normal text elements, and aligned according to text-align property of their container, which is what you want.
There are many ways to center any element. I listed some
Set it's width to some value and add margin: 0 auto.
.partners {
width: 80%;
margin: 0 auto;
}
Split into 3 column layout
.partners {
width: 80%;
margin-left: 10%;
}
Use bootstrap layout
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">Your Content / Image here</div>
</div>
You just need
.parent-div { text-align: center }
Try using flexbox. As an example, the following code shows the CSS for the container div inside which the contents needs to be centered aligned:
Depending on the axis of the flexbox, you will need to align or justify items, read more at MDN
.absolute-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
justify-content: center;
}
in parent div
parentDiv: {
display:flex;
height:100%;
width:100%;
justify-content:center;
align-items:center;
}
You just do CSS changes for parent div
.parent-div {
text-align: center;
display: block;
}
The problem is that you assigned a fixed width to your .wrap DIV. The DIV itself is centered (you can see that when you add a border to it) but the DIV is just too wide. In other words the content does not fill the whole width of the DIV.
To solve the problem you have to make sure, that the .wrap DIV is only as wide as it's content.
To achieve that you have to remove the floating in the content elements and set the display property of the block levels elements to inline:
#partners .wrap {
display: inline;
}
.wrap { margin: 0 auto; position: relative;}
#partners h2 {
color: #A6A5A5;
font-weight: normal;
margin: 2px 15px 0 0;
display: inline;
}
#partners ul {
display: inline;
}
#partners li {display: inline}
ul { list-style-position: outside; list-style-type: none; }
do like this :
child{
position:absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
After 2022.
Here is your class to center content both vertically and horizontally.
.center {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}