Vertically align the text within an `<li>` element that has an unspecified height

Struggling with creating responsive proportional rectangles for my gallery. It was working fine until I tried to center the text vertically, but couldn't figure out how to do it while maintaining proportional resizing. Any help or advice would be greatly appreciated. Thanks.

#container{
    margin-left:auto;
    margin-right:auto;
}

#MyList li{
    float: left;
    background-image: url(../images/bardiches.png);
    background-size: cover;
    background-position: center; 
}

#MyList a{
    text-align: center;
    line-height: 100%;

    display: block;
    background-color: rgba(255,255,255,.0);

    transition: background-color 500ms ease-out;
}

#MyList a:hover{
    background-color: rgba(255,255,255,.95);
}

Styles for Desktop/Tablet Devices

@media only screen and (min-width: 768px){
    #container{
        width:80%;
    }

    #MyList li{
        width:46%;
        margin-bottom:50px;
        margin-left: 2%;
        margin-right: 2%;
    }

    #MyList li:nth-child(4n){
        margin-right:0px;
    }

    #MyList a{
        height:100%;
        padding-bottom: 55%;
    }
}

HTML Code 

<div id="container">
    <ul id="MyList">
        <li>
           <a href="#"> 
              Bardiches
           </a>
        </li>
        <li>
           <a href="#"> 
              Bardiches
           </a>
        </li>
        <li>
           <a href="#"> 
              Bardiches
           </a>
        </li>
        <li>
           <a href="#"> 
              Bardiches
           </a>
        </li>
        <li>
           <a href="#"> 
              Bardiches
           </a>
        </li>
        <li>
           <a href="#"> 
              Bardiches
           </a>
        </li>

    </ul>
</div>

Check out my test site here:-

htmlcsscenteringimage-gallery

Answer №1

One technique to consider is wrapping the text within span tags and applying specific CSS rules. This method can be effective for displaying multi-line text as well. Hopefully, this solution proves helpful for you.

<a href="#">
    <span>Bardiches</span>
</a>

#MyList a {
    position: relative;
}

#MyList a span {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}

Answer №2

#MyList li {
  margin-bottom: 50px;
  margin-left: 2%;
  margin-right: 2%;
  position: relative;
  width: 46%;
}
#MyList a span {
  bottom: 0;
  height: 5%;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

To achieve the desired layout, ensure that the 'span' tag is nested within all 'a' tags.

Answer №3

One alternative approach is to utilize the flex property:

To implement this, adjust the CSS definition of the specified block as shown below:

#container li {
   width: 46%;
   margin-bottom: 50px;
   margin-left: 2%;
   margin-right: 2%;
   height: 200px;
   display: flex;
   justify-content: space-around;
   flex-direction: column;
}

In my case, I found it necessary to specify a height attribute for testing purposes, though this could also be influenced by the image used.

Answer №4

  • Eliminate the padding-bottom rule of 55% that is present in all anchor tags within your list items. Removing this will prevent the long white space from appearing after your text span.

    To distribute the padding space evenly, adjust it for both top and bottom like so:

    #MyList a{
padding-bottom: 27.5% !important;
padding-top: 27.5% !important;;
}

    Snippet

     #MyList a{
    padding-bottom: 27.5% !important;
    padding-top: 27.5% !important;
    }
    <!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Title</title>
  <link href="css/reset.css" rel="stylesheet" type="text/css" />
  <link href="http://benson.graphics/test/css/styles.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="js/jquery.mobile.custom.min.js"></script>
</head>

<body>
  <section>
    <div id="container">
      <ul id="MyList">
        <li>
          <a href="#"> 
                            Bardiches
                        </a>
        </li>
        <li>
          <a href="#">
            <span class="title">
                                Bardiches
                            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">
                                Bardiches
                            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">
                                Bardiches
                            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">
                                Bardiches
                            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">
                                Bardiches
                            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">
                                Bardiches
                            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">
                                Bardiches
                            </span>
          </a>
        </li>
      </ul>
    </div>
  </section>
  <script type="text/javascript" src="js/custom_behaviors.js"></script>
</body>

</html>

    • 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

    What is the best way to send user input text to a Vue method using v-on:change?

    I am trying to pass the input value from my HTML to a Vue method called checkExist(). I need to get this value within the checkExist() method. Can anyone provide advice on how I can achieve this? I am new to Vue and could use some guidance. HTML: <inp ...

    javascripthtmlvue.jsecmascript-6

    Validating user input fields to display error messages when empty

    As part of my program, I need to gather information from users regarding their name and the number of pets they have. If a user enters an empty string, I want to display an error message prompting them to input something and fill the text box with their en ...

    javascripthtml

    What are the best methods for visually comparing two HTML documents?

    In the process of developing a Windows Forms application, my goal is to compare two HTML documents. The initial document is sourced externally and contains structural errors. To address this, an algorithm is utilized to optimize the HTML text, resulting in ...

    htmlwinformswebview2

    Facing an issue where the CSS class name is not displaying correctly when utilizing CSS Modules with my React

    This webpack.config.js file is dedicated to the module section, where loaders are defined for JSX files and CSS. module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'bab ...

    javascriptcssreactjswebpack-dev-serverwebpack-style-loader

    Is there a faster method for adding and removing classes on a table?

    I have a sizeable table containing 27 columns and anywhere from 5 to 100 rows. To switch between a simple view showing the first 5 columns and an expert view showing all 27 columns, I have implemented a mode switch (checkbox). Currently, I am using the fo ...

    jquerycsshtml-tablejquery-selectors

    As the user types input in real time, automatically adjust the form's value before submission

    I'm looking for assistance in dynamically updating the value of a form submit button as the user types into an input field. <form> <input type="text" name="number" id="number" value = 0 /> <input type="submit" id="submit"> ...

    javascriptjqueryhtml

    How to Vertically Align a div in the Center using Bootstrap 5

    Is there a way to horizontally center a div using bootstrap 5? I want the div to be positioned in the middle, between the content above it and the end of the screen. I attempted the following: <div>some content</div> <div class="d-flex ...

    htmlcssbootstrap-5

    How can CSS be instructed to "apply the following most specific rule in order to determine this property"?

    Utilizing Material-UI and JSS for CSS management, I've encountered an issue where styles appear differently in development versus production. The discrepancy stems from the order of rules within the file. For instance, when defining an element like ...

    cssmaterial-uijss

    How can I modify the appearance of a slider's range?

    I'm struggling with customizing the style of a price slider input range. No matter what I do, the changes don't seem to take effect. Can anyone pinpoint where I may be going wrong? Appreciate any guidance on this! Thank you! <div class=" ...

    javascripthtmljquerycssslider

    Strategies for positioning a fixed div at the bottom of another div

    I'm in the process of creating a digital restaurant menu... I decided to format it as a popup, situated within a fixed container on top of a gray transparent overlay. However, with a large number of dishes, the content exceeds the size of the containe ...

    htmlcssscrollpopupcss-position

    How to successfully implement ng-show with Html5's <dialog> tags

    It's incredible how simple Html5 dialogs are. It feels like they should have been here 15 years ago! I'm having trouble getting ng-show to work with dialogs. Any tips on how to make it happen? <!DOCTYPE html> <html ng-app="project"> ...

    angularjshtmldialog

    connect to new database using mysqli_find_cat

    <?php $host = "localhost"; $username = "root"; $password = ""; $db = "mineforums"; $connect = mysqli_connect($host, $username, $password, $db) or die(mysqli_error($connect)); ?> Here is the PHP snippet that connects to my databa ...

    phphtmlmysqlcss

    Steps for layering three images with distinct red, green, and blue components using HTML and CSS

    Is it possible to overlay three versions of an image, each with red, green, and blue components, in order to recreate the original image using only HTML and CSS? I have tried this HTML setup: <div id="container"> <img class="color" id="red" ...

    htmlcsscolors

    Guide on building a personalized button layout in Bootstrap 4

    I have been working on a React component that I want to stick to the bottom of the screen no matter what content is above it. Even if there is minimal content, I want it to remain at the bottom. To achieve this, I added style={{position: 'fixed' ...

    htmlcssreactjsbootstrap-4material-ui

    AngularJS form submission with Ajax requiring a double click to successfully submit the form

    I need to perform the following activities on my HTML page: User inputs email and password for registration Form is sent to Controller when user clicks Submit Controller uses AJAX to create JSON request to RESTful Server and receives response from server ...

    javascriptjqueryhtmlangularjsajax

    What are the steps to clipping a canvas using CSS clip-path?

    When it comes to clipping a canvas, there are multiple methods that can be used. One way is to create a path with getContext('2d') and set globalCompositeOperation. Another method involves using -webkit-clip-path or clip-path, though the latter m ...

    javascriptcsshtmlcanvaswebkit

    What is the best way to pass the index value of a v-for loop as an argument to a computed property function in Vue?

    I'm looking to pass the index value from a v-for loop (inside a path tag) as a parameter to a function stateData(index) defined in a computed property in Vue. I attempted to achieve this using v-model="stateData[index]", but an error is being displaye ...

    javascripthtmlvue.js

    The ng-include feature seems to be malfunctioning

    After building a basic web page using AngularJs, I ran into an issue when attempting to integrate header.htm into index.html - nothing was displaying in the browser. index.html <html> <script src="https://ajax.googleapis.com/ajax/libs/angul ...

    javascripthtmlangularjsangularjs-directiveangularjs-ng-include

    What are the steps for implementing JWT authentication with static content hosting?

    My website consists of a frontend (built with Vue) and a backend (developed using node). The api relies on jwt authentication, allowing only logged-in users to interact with the backend. The jwt is included in the Authorization: Bearer xxx header. An iss ...

    htmlnode.jsauthenticationjwt

    Section of links spanning 4 columns in full-width

    Planning to design a 4 column link section for an upcoming website, aiming to achieve the look in the provided screenshot. https://i.sstatic.net/pydBp.png Each box will serve as a clickable link, changing color on hover. Utilizing the Bootstrap framework ...

    htmlcssbootstrap-4background-image