Place image in the center with no hyperlink and adjust width to 100%

Is there a way to center my Logo while ensuring that the hyperlink only covers the image itself, rather than extending to 100% width?

I want my logo centered and still have the link confined to just the image area.

https://i.sstatic.net/Ko9E6.jpg

    .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;
      }
    }
<a href="#"><img class="logo" src="logo.png"></a>

htmlcsshyperlinkmargincenter

Answer №1

If I'm interpreting the question correctly, a solution like this could work: Ensure that both the logo and the logo-wrapper are set to display as inline-block (instead of block) so they wrap the content properly. By making them inline-block elements, you can easily center align them using the text-align property of a main wrapper encompassing them. Test your design by resizing your browser window to observe how the breakpoint functions.

.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>

Answer №2

One possible solution is to add layers to the image in the desired size and then link these layers together.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue of Basic Bootstrap 5 Modal triggering twice is causing a frustrating experience

My modal is almost working perfectly - it changes content based on the clicked image, but it is triggering twice in the backend and I can't figure out why! I followed Bootstrap's documentation for this, so I'm unsure where the issue lies. Al ...

javascripthtmlbootstrap-modalbootstrap-5

Adjust the size of the DIV container to match the width of its floating contents

I have been experimenting with creating a container div that adjusts its width based on the size of its contents. To achieve this, I have successfully used float: left on the container. Here's what my current setup looks like: HTML <div class=&ap ...

csshtmlcss-float

The grid collapses whenever I add any margin or padding

My current setup involves using the bootstrap-grid system alongside Material UI, which has been working well overall. However, I am facing a specific issue where the grid system does not maintain its slot space after applying padding or margin. This caus ...

cssreactjsmaterial-uibootstrap-grid

the mobile website is not properly aligned on a horizontal axis

As I work on creating a mobile version of my website, I've come across a challenge: The entire site fits perfectly on the computer at a browser width of 480px, but when viewed on my mobile phone (regardless of the browser used), it leaves space on the ...

javascripthtmlcssmobileweb

Viewing a Google Charts graph upon the loading of a web page

Utilizing the Google Charts library, I have incorporated a graphic on my web page that is dynamically added using AJAX into a <div> element. To display the graph when the page loads, I have written the following code: <script type="text/ ...

javascripthtmlajaxgoogle-visualization

unable to connect to the web service using webview

When attempting to call a web service or display an alert, I am encountering some issues: Here is the code from my activity: mWebView = (WebView)findViewById(R.id.webViewRootAciviy); mWebView.setWebViewClient(new WebViewClient()); mWebView.setWebChromeCl ...

javascriptandroidjqueryhtml

Is there a way to display a list of dropdown menu options using Selenium with Python?

I am currently attempting to utilize Selenium Python and its PhantomJS function in order to print out all the items from the first drop-down menu on this particular page (). Unfortunately, I keep encountering a No Attribute error message. If anyone could ...

pythonhtmlseleniumselenium-webdriverweb-crawler

What is the best way to format my JSON data as a table on the screen?

I need to display my data in a table format at the bottom of the screen, as shown in the screenshot below. Here is an example of the top part code: This code snippet is also used for movies. <View> <Text key={item.symbol}>{item.symbol}<Te ...

cssiosjsonreactjsreact-native

Customizing the appearance of a local image with inline CSS using the style attribute and background-image:url

I'm having trouble loading the image Hormiga.jpg as a background for my slideshow using inline style. The url attribute doesn't seem to be applied correctly. Here is the original code where an image is loaded successfully: <div class="pa ...

htmlcsswebfrontendinline-styles

The total height of an HTML element, which takes into account the margin of the element itself

Is there a way to accurately calculate the height of an element including margins, even when dealing with child elements that have larger margins than their parents? HTMLElement.offsetHeight provides the height excluding margin, while this function from ...

javascripthtmlcss

Difficulty encountered in closing div by clicking the background with the help of jquery

I am facing a challenge with properly closing a div container and restoring it to its original state when I click outside of it. Despite trying various solutions from stackoverflow and extensive internet research, I have been unable to find or come up with ...

javascriptjqueryhtmlcssweb

Eliminating the impact of a CSS selector

I have a complex mark-up structure with multiple CSS classes associated: classA, classB, classC, classD. These classes are used for both styling via CSS and event binding using jQuery selectors. The Challenge: I need the jQuery events to be functional whi ...

javascriptjqueryhtmlcss

Can we switch out the jQuery background color for a background image instead?

I received a recommendation from a friend that involves utilizing this jquery code: .css({ backgroundColor: '#ddd' }) However, I prefer to use a background image instead. How can I modify the jquery code to achieve this? I am looking to implem ...

jquerycss

Adjust the CSS content using the data-content attribute to include line breaks

My current coding setup includes: <div id="mydiv" data-content="Loading..."></div> This is how I style it with CSS: #mydiv:after{ content: attr(data-content); height: 100%; opacity: 1; position: absolute; text-align: center; ...

javascriptjquerycss

Tips for maintaining the active state of an Accordion during a page refresh in Bootstrap

I've got this snippet for an Accordion. It's functioning properly, but I'm struggling to keep the selected tab active after a page refresh. The added JavaScript isn't working and I can't pinpoint the exact issue. <div class=&quo ...

javascripthtmlbootstrap-4accordion

Exploring the effects of zooming on YouTube videos in Firefox

Strange phenomenon, but my website appears to be having display issues specifically on Firefox. Surprisingly, it looks perfectly fine on IE9, Safari, and Chrome. The layout of the site in Firefox seems to change when I zoom in or out, resulting in the You ...

htmlcssfirefoxyoutube

Utilizing Jquery for deleting text content from a div element

I have a situation where I need to eliminate the text "(2012)" from a particular div using jQuery. Here is the code snippet that I am currently using: var el = $("#myDiv"); //replace(/word to remove/ig, ""); el.html(el.html().replace(/(2012)/ig, "")); ...

jquerycsshtmlreplace

Tips for creating a scrolling animation effect with images

I'm currently attempting to create an animation on an image using HTML/CSS. The issue I'm facing is that the animation triggers upon page load, but I would like it to activate when scrolling down to the image. Below is my snippet of HTML: <fi ...

javascripthtmlcss

The issue with Angular version 15 p-dialogue not displaying HTML content when using a component selector

In my Angular application, I have an issue with rendering a component called urc.component from a different module (variance.module) inside another module (nursing-audit.module). The p-dialogue is opening and displaying the header correctly, but the urc.co ...

htmlangulartypescriptprimeng

Issues with JavaScript causing slideshow to malfunction

I'm experiencing some issues with my image slider. It seems that during the initial loop, the slideshow keeps reverting back to 'image3'. However, after the first loop, everything appears to work correctly. I am looking for a solution to ens ...

javascripthtmlcss