What is the best way to vertically center an amp-img element?

I'm attempting to vertically center an <amp-img> within a div.

<div class="outer" style="height: 100vh">
  <amp-img class="inner" layout="responsive"></amp-img>
</div>

I have tried various methods so far, but none seem to be working:

First Attempt

.outer {
  display: flex;
  justify-content: center;
  align-items: center; 
}

In this case, the image disappears.

Second Attempt

.outer {
  line-height: 100vh
}

.inner {
  display: inline-block;
  vertical-align: center;
}

Here, the image's size becomes 0 x 0 and it disappears as well.

And More

Other approaches also lead to the disappearance of the image or do not behave as expected.

Is there any way to successfully center the <amp-img> vertically?

htmlcssamp-html

Answer №1

After reviewing your initial example, I am pleased to say that you are very close to the solution:

Please take a look at this revised example:

 .inner{
    flex-basis: 0;
    -ms-flex-preferred-size: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
  .outer {
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh
  }
<div class="outer">
    <amp-img class="inner" layout="responsive">your image</amp-img>
</div>

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

Retrieving a unique custom data-attribute using select2 on a <select> element

If you were presented with the following HTML5 snippet: <select id="example"> <option value="AA" data-id="143">AA</option> <option value="BB" data-id="344">BB</option> </select> $("#example").select2(); What i ...

htmljquery-select2custom-data-attribute

The scrollbar is failing to display the entire content on the right side of the HTML document

I am facing an issue with creating a horizontal scroll bar within a div element that contains all the contents. The problem arises when a user scrolls, as it is not fully scrolled to the end of the right side, making it impossible to see the content at the ...

htmlcss

Aligning two floating elements vertically in respect to each other

Although the topic of vertically centering elements is common on various websites, I am new to HTML and still find it confusing even after doing some research. I attempted to create a basic header element for a website that includes an h1 title and a navi ...

htmlcssvertical-alignment

Mobile WEBSITE Development with Ionic Framework

Exploring the potential of utilizing the Ionic Framework for my mobile website has piqued my curiosity. Are there any concerns I should be aware of when running Ionic Framework on mobile browsers? My plan is to leverage the framework's CSS and JS capa ...

angularjshtmlmobileionic-frameworkmobile-website

Submitting both $_POST[] data and $_FILES[] in a single AJAX request

Struggling with uploading images along with dates on my website. I am passing the date using $_POST and the image files in $_FILES. Here is the Javascript code snippet: (function post_image_content() { var input = document.getElementById("images"), ...

javascriptphpjqueryhtmlajax

What is the best way to determine the midpoint index of an array?

As a newcomer, I have a question regarding a recent assignment. The task involves creating a global array where objects are imported as they are entered into an input field on the HTML document. The challenge is to update the current list on the document ...

javascripthtmlarraysindexing

How can I select the specific element within a class when a particular checkbox is selected?

Having a dynamically generated list of elements, each structured like this: <div class="under-item-description"> <span class="under-compare-price">100</span><span class="under-price">50</span> <span class="under-compar ...

javascriptjqueryhtmlcsscheckbox

Tips for creating a dynamic menu with animated effects

Check out my fiddle here: http://jsfiddle.net/k3AHM/23/ $(document).scroll(function () { var y = $(this).scrollTop(); if (y > 110) { $('.menu-container').addClass( "fix-menu" ).animate('top', '-3px&a ...

javascriptjquerycss

This message is designed to validate the form as it is dynamic and

Is there a way to dynamically determine which .input fields have not been entered yet? In the following code snippet, you can observe that if I input data out of sequence, the #message displays how many inputs have been filled and shows the message in sequ ...

javascripthtmlforms

Click and Rotate for More Information

Hello everyone, I have a question regarding creating a unique Tumblr theme. My goal is to make the posts rotate on the y-axis when clicked, revealing like and reblog information. Currently, I've been able to achieve this effect on hover by using code ...

javascriptjqueryhtmlcss

What are your thoughts on using image maps with CSS?

My images are also links, and the code looks like this: <a href="../www.google.com"><img src="pages/squirrely.png" /></a> While they function properly as links, I want them to only be clickable if you click on the central part of the im ...

htmlcssimagehyperlinkimagemap

Utilize the identical button and modify the text displayed on it for implementing my jQuery function that toggles visibility

Is there a way to modify my current jQuery function for displaying and hiding a contact form using the same button? Currently, I have two buttons that toggle the visibility of the form: "Write me" shows the form on click and changes to "I don't want ...

jqueryhtml

jQuery's z-index feature is malfunctioning

When I hover over my menu, a box fades in. However, there is a small icon behind this box that I want to move to the front so it can be visible during hover. To see an example of my menu, click here: Navigation I attempted to address this by using jQuer ...

javascriptjqueryhtmlz-index

Button on aspx page not functioning properly when clicked

I seem to be experiencing an issue with buttons. To check if the function is being triggered, I used alert("") and found that it does enter the function when the button is clicked. However, after the alert, any other code inside the function seems to not w ...

javascripthtmlasp.net

Using jQuery and AJAX to dynamically pass a variable into the URL parameter in dynamic HTML pages

By utilizing jQuery, I am dynamically updating the content of a div with a form that consists of two textboxes and a button. Upon clicking this button, ajax is employed to retrieve results from a public webservice based on the data gathered from the textbo ...

jqueryhtmlajaxvisual-studioweb-services

What is the best way to bring a closing </div> tag closer to its opening <div> tag in React, Angular, or Vue

Introduction Experienced JavaScript developers may cringe at the sight of a lengthy 200-line function. Their goal is to break it down into smaller, more manageable functions, each around 20 lines long. The idea is for a function to fit on one screen witho ...

htmlangularreactjsvue.jscode-organization

Styling tricks for rotating carousel images using CSS animations

I'm currently working on a carousel component that functions without the use of JavaScript. While I have made significant progress towards my goal, I am facing challenges with the animation itself. The desired behavior is for the slides to animate o ...

htmlcss

Building applications with Vue.js and Framework7 while incorporating the powerful Axios library

I am inexperienced with framework7 and vuejs. Can someone confirm if I am importing it correctly? Additionally, how can I make axios accessible from other pages? Here is my main.js file. I’m uncertain if the import process is accurate or if any steps ar ...

htmlvue.jsaxioshtml-framework-7

Why am I only able to send form data using the GET method and not the POST method?

I'm currently delving into the realm of html and php, but I seem to have hit a snag. When utilizing the GET method in my html form, parameters are successfully sent to my php file. However, when attempting the same with the POST method, no parameters ...

phphtmlforms

"Use jQuery to select all the cells in a row except for the

I found a visually appealing table layout that looks like this : https://i.stack.imgur.com/oRxYP.png What caught my attention is how clicking on a row selects the entire row. Take the example in the image above, where the second row is highlighted upon s ...

javascriptjqueryhtmlajax